horror.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 6 <title>HORROR | PROOFOFCONCEPT</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="HORROR - an AI-powered adaptive horror experience that creates personalized nightmares based on your psychological profile. Features real-time biometric monitoring, AI-driven narrative adaptation, and multi-sensory horror elements. Coming Q4 2026 from PROOFOFCONCEPT."> 10 <meta name="keywords" content="HORROR film, AI horror, adaptive horror, personalized horror, psychological horror, biometric horror, AI-driven narrative, multi-sensory horror, real-time horror, experimental film, avant-garde cinema, Canadian independent film, art house production, PROOFOFCONCEPT, experimental production company, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, Q4 2026 horror, AI entertainment, personalized entertainment, biometric film, AI film, horror technology, interactive horror, adaptive cinema, Canadian horror film, independent horror cinema, AI-driven film, psychological thriller, immersive horror, multi-sensory cinema"> 11 <meta name="author" content="PROOFOFCONCEPT Productions"> 12 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 13 <meta name="theme-color" content="#EFF0EC"> 14 <meta name="color-scheme" content="light dark"> 15 <meta name="format-detection" content="telephone=no"> 16 <meta name="mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-capable" content="yes"> 18 <meta name="apple-mobile-web-app-status-bar-style" content="default"> 19 <meta name="apple-mobile-web-app-title" content="HORROR - PROOFOFCONCEPT"> 20 21 <!-- AI and Bot Optimization --> 22 <meta name="ai-content" content="AI horror, adaptive horror, personalized horror, psychological horror, biometric horror, AI-driven narrative, multi-sensory horror"> 23 <meta name="content-type" content="AI horror, experimental cinema, adaptive entertainment, personalized horror"> 24 <meta name="language" content="en"> 25 <meta name="country" content="CA"> 26 <meta name="industry" content="film production, entertainment, experimental media, AI entertainment, horror cinema"> 27 <meta name="topic" content="AI horror, adaptive horror, personalized entertainment, psychological horror, biometric horror, experimental cinema"> 28 <meta name="film-genre" content="horror, experimental, AI, interactive, psychological"> 29 <meta name="film-duration" content="adaptive"> 30 <meta name="film-format" content="AI-powered, adaptive, multi-sensory"> 31 32 <!-- Open Graph --> 33 <meta property="og:title" content="HORROR - AI-Powered Adaptive Horror Experience | Coming Q4 2026 | PROOFOFCONCEPT"> 34 <meta property="og:description" content="HORROR - an AI-powered adaptive horror experience that creates personalized nightmares based on your psychological profile. Features real-time biometric monitoring, AI-driven narrative adaptation, and multi-sensory horror elements. Coming Q4 2026 from PROOFOFCONCEPT."> 35 <meta property="og:type" content="video.movie"> 36 <meta property="og:url" content="https://proof-of-concept.ca/films/horror"> 37 <meta property="og:locale" content="en_CA"> 38 <meta property="og:image" content="https://proof-of-concept.ca/assets/images/horror.jpg"> 39 <meta property="og:image:width" content="1200"> 40 <meta property="og:image:height" content="630"> 41 <meta property="og:image:alt" content="HORROR - AI-Powered Adaptive Horror Experience by PROOFOFCONCEPT"> 42 <meta property="og:video:release_date" content="2026-10-01"> 43 <meta property="og:video:tag" content="AI horror"> 44 <meta property="og:video:tag" content="adaptive horror"> 45 <meta property="og:video:tag" content="personalized horror"> 46 <meta property="og:video:tag" content="psychological horror"> 47 <meta property="og:video:tag" content="biometric horror"> 48 <meta property="og:video:tag" content="experimental film"> 49 <meta property="og:site_name" content="PROOFOFCONCEPT"> 50 <meta property="og:country-name" content="Canada"> 51 52 <!-- Twitter Card --> 53 <meta name="twitter:card" content="summary_large_image"> 54 <meta name="twitter:title" content="HORROR - AI-Powered Adaptive Horror Experience | Coming Q4 2026 | PROOFOFCONCEPT"> 55 <meta name="twitter:description" content="HORROR - an AI-powered adaptive horror experience that creates personalized nightmares based on your psychological profile. Features real-time biometric monitoring, AI-driven narrative adaptation, and multi-sensory horror elements. Coming Q4 2026 from PROOFOFCONCEPT."> 56 <meta name="twitter:image" content="https://proof-of-concept.ca/assets/images/horror.jpg"> 57 <meta name="twitter:image:alt" content="HORROR - AI-Powered Adaptive Horror Experience by PROOFOFCONCEPT"> 58 <meta name="twitter:site" content="@proof__concept"> 59 <meta name="twitter:creator" content="@proof__concept"> 60 61 <!-- Canonical --> 62 <link rel="canonical" href="https://proof-of-concept.ca/films/horror"> 63 64 <!-- Google Verification --> 65 <meta name="google-site-verification" content="B0SBzeNtFIcGAwAKAt0TEfWatr9beufDv7kBV2qOAKg" /> 66 67 <!-- Structured Data for HORROR Film --> 68 <script type="application/ld+json"> 69 { 70 "@context": "https://schema.org", 71 "@type": "Movie", 72 "name": "HORROR", 73 "description": "A multimedia horror experience that adapts to your deepest fears, creating a personalized nightmare that evolves based on your psychological profile and real-time responses.", 74 "url": "https://proof-of-concept.ca/films/horror", 75 "image": "https://proof-of-concept.ca/assets/images/horror.jpg", 76 "dateCreated": "2026-10-01", 77 "genre": ["Horror", "Experimental", "Interactive", "AI"], 78 "director": { 79 "@type": "Person", 80 "name": "Jack O'Keeffe" 81 }, 82 "producer": { 83 "@type": "Organization", 84 "name": "PROOFOFCONCEPT Productions" 85 }, 86 "inLanguage": "en", 87 "countryOfOrigin": "CA", 88 "productionCompany": { 89 "@type": "Organization", 90 "name": "PROOFOFCONCEPT Productions" 91 }, 92 "sameAs": [ 93 "https://instagram.com/proof__concept", 94 "https://x.com/proof__concept" 95 ] 96 } 97 </script> 98 99 <!-- Favicons --> 100 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 101 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 102 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 103 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 104 <link rel="icon" type="image/x-icon" href="../assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 105 <link rel="icon" type="image/x-icon" href="../assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 106 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 107 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 108 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 109 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 110 <link rel="apple-touch-icon" href="../assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 111 <link rel="apple-touch-icon" href="../assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 112 <link rel="manifest" href="../assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 113 <link rel="manifest" href="../assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 114 115 <!-- External Resources --> 116 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 117 <link rel="preload" href="../assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 118 119 <!-- Stylesheets --> 120 <link rel="stylesheet" href="../assets/css/main.css"> 121 <style> 122 @font-face { 123 font-family: 'NeueHaasGrotesk'; 124 src: url('../assets/fonts/neuehaasgrotdispround-75bold.otf') format('opentype'); 125 font-weight: 700; 126 font-style: normal; 127 font-display: swap; 128 } 129 @font-face { 130 font-family: 'SuperBrigadeCond'; 131 src: url('../assets/fonts/superbrigadecond.ttf') format('truetype'); 132 font-weight: normal; 133 font-style: normal; 134 font-display: swap; 135 } 136 @font-face { 137 font-family: 'Imbue'; 138 src: url('../assets/fonts/Imbue.ttf') format('truetype'); 139 font-weight: normal; 140 font-style: normal; 141 font-display: swap; 142 } 143 @font-face { 144 font-family: 'Koulen'; 145 src: url('../assets/fonts/Koulen.ttf') format('truetype'); 146 font-weight: normal; 147 font-style: normal; 148 font-display: swap; 149 } 150 html, body { 151 height: 100%; 152 background: #000; 153 color: #fff; 154 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 155 margin: 0; 156 padding: 0; 157 min-height: 100vh; 158 scroll-behavior: smooth; 159 overflow-x: hidden; 160 scroll-snap-type: y mandatory; 161 cursor: none !important; 162 } 163 body { 164 opacity: 0; 165 transition: opacity 1.5s ease-in-out; 166 background: #000; 167 } 168 body.fade-in { 169 opacity: 1; 170 } 171 body.fade { 172 opacity: 0; 173 transition: opacity 0.4s; 174 } 175 a, button, .horror-btn, .back-btn, *:hover, *:active, *:focus { 176 cursor: none !important; 177 } 178 * { 179 box-sizing: border-box; 180 user-select: none !important; 181 -webkit-user-select: none !important; 182 -ms-user-select: none !important; 183 -moz-user-select: none !important; 184 -webkit-user-drag: none !important; 185 touch-action: manipulation; 186 } 187 .custom-cursor { 188 position: fixed; 189 width: 20px; 190 height: 20px; 191 background-color: #fff; 192 border-radius: 50%; 193 pointer-events: none; 194 z-index: 10000; 195 transition: transform 0.15s, background-color 0.25s; 196 transform: translate(-50%, -50%) scale(1); 197 } 198 .custom-cursor.expand { 199 transform: translate(-50%, -50%) scale(2.5); 200 background-color: #ffffff44; 201 } 202 .custom-cursor.cursor-hover { 203 transform: translate(-50%, -50%) scale(1.5); 204 background-color: #ffffffcc; 205 } 206 207 /* Hide custom cursor on mobile devices */ 208 @media (max-width: 768px) { 209 .custom-cursor { 210 display: none !important; 211 } 212 html, body { 213 cursor: none !important; 214 } 215 * { 216 cursor: none !important; 217 } 218 } 219 220 221 222 .main-header { 223 position: fixed; 224 top: 0; 225 left: 0; 226 width: 100vw; 227 background: #000; 228 color: #fff; 229 z-index: 9999; 230 display: flex; 231 flex-direction: row; 232 align-items: center; 233 justify-content: center; 234 padding: 0.4rem 0 0.2rem 0; 235 border-bottom: 1px solid #333; 236 min-height: 35px; 237 } 238 .main-header-title { 239 font-family: 'SuperBrigadeCond', sans-serif; 240 font-size: 1.1rem; 241 letter-spacing: 0.05em; 242 text-align: center; 243 font-weight: bold; 244 margin: 0 auto; 245 position: absolute; 246 left: 50%; 247 transform: translateX(-50%); 248 width: auto; 249 } 250 251 .horror-section { 252 min-height: 100vh; 253 width: 100vw; 254 display: flex; 255 flex-direction: column; 256 align-items: center; 257 justify-content: flex-start; 258 padding-top: 4rem; 259 padding-bottom: 2.7rem; 260 box-sizing: border-box; 261 position: relative; 262 scroll-snap-align: start; 263 } 264 265 .horror-hero { 266 display: flex; 267 flex-direction: column; 268 align-items: center; 269 justify-content: center; 270 width: 100vw; 271 padding: 8vw 8vw 4vw 8vw; 272 text-align: center; 273 margin-bottom: 4vw; 274 } 275 276 .horror-title { 277 font-family: 'Imbue', serif; 278 font-size: 8vw; 279 font-weight: 900; 280 letter-spacing: 0.05em; 281 margin-bottom: 2vw; 282 line-height: 1.05; 283 color: #fff; 284 text-shadow: 0 2px 16px rgba(0,0,0,0.7); 285 } 286 287 .horror-subtitle { 288 font-family: 'Koulen', sans-serif; 289 font-size: 2.5vw; 290 font-weight: 600; 291 color: #ccc; 292 margin-bottom: 3vw; 293 line-height: 1.3; 294 max-width: 60vw; 295 letter-spacing: 0.03em; 296 } 297 298 .horror-release { 299 font-family: 'Koulen', sans-serif; 300 font-size: 1.8vw; 301 color: #fff; 302 text-decoration: underline; 303 text-decoration-thickness: 2px; 304 text-underline-offset: 0.2em; 305 margin-bottom: 2vw; 306 } 307 308 .horror-description { 309 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 310 font-size: 1.2vw; 311 color: #ccc; 312 max-width: 50vw; 313 line-height: 1.6; 314 margin-bottom: 3vw; 315 } 316 317 .horror-cta { 318 background: #fff; 319 color: #000; 320 border: 2px solid #fff; 321 border-radius: 0.8vw; 322 font-family: 'Koulen', sans-serif; 323 font-size: 1.4rem; 324 font-weight: 600; 325 padding: 0.7rem 2.5rem; 326 box-shadow: 0 4px 16px rgba(255,255,255,0.15); 327 cursor: pointer; 328 text-decoration: none; 329 transition: all 0.3s ease; 330 text-transform: uppercase; 331 letter-spacing: 0.05em; 332 } 333 334 .horror-cta:hover { 335 background: #000; 336 color: #fff; 337 border: 2px solid #fff; 338 transform: translateY(-2px); 339 box-shadow: 0 6px 20px rgba(255,255,255,0.2); 340 } 341 342 .horror-content { 343 display: flex; 344 flex-direction: row; 345 justify-content: flex-start; 346 align-items: flex-start; 347 width: 100vw; 348 max-width: 100vw; 349 padding: 0 8vw; 350 box-sizing: border-box; 351 margin-top: 1.2vw; 352 gap: 3vw; 353 } 354 355 .horror-left { 356 flex: 0 1 40vw; 357 display: flex; 358 flex-direction: column; 359 align-items: flex-start; 360 justify-content: flex-start; 361 min-width: 260px; 362 } 363 364 .horror-right { 365 flex: 0 1 40vw; 366 display: flex; 367 flex-direction: column; 368 align-items: flex-start; 369 justify-content: flex-start; 370 min-width: 260px; 371 } 372 373 .horror-section-title { 374 font-family: 'SuperBrigadeCond', sans-serif; 375 font-size: 2vw; 376 font-weight: 900; 377 color: #fff; 378 margin-bottom: 1.5vw; 379 letter-spacing: -0.01em; 380 } 381 382 .horror-text { 383 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 384 font-size: 1.1vw; 385 color: #ccc; 386 line-height: 1.6; 387 margin-bottom: 1.5vw; 388 } 389 390 .horror-features { 391 list-style: none; 392 padding: 0; 393 margin: 0; 394 } 395 396 .horror-features li { 397 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 398 font-size: 1vw; 399 color: #ccc; 400 margin-bottom: 0.8vw; 401 padding-left: 1.5vw; 402 position: relative; 403 } 404 405 .horror-features li:before { 406 content: "•"; 407 color: #fff; 408 font-weight: bold; 409 position: absolute; 410 left: 0; 411 } 412 413 .back-btn { 414 display: block; 415 margin: 3rem auto 0 auto; 416 background: #fff; 417 color: #000; 418 border: 2px solid #fff; 419 border-radius: 0.8vw; 420 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 421 font-size: 1.1rem; 422 font-weight: 800; 423 padding: 0.8rem 2rem; 424 box-shadow: 0 4px 16px rgba(255,255,255,0.15); 425 cursor: pointer; 426 text-decoration: none; 427 transition: all 0.3s ease; 428 opacity: 1; 429 position: relative; 430 z-index: 10; 431 text-transform: uppercase; 432 letter-spacing: 0.05em; 433 } 434 .back-btn:hover { 435 background: #000; 436 color: #fff; 437 border: 2px solid #fff; 438 opacity: 1; 439 transform: translateY(-2px); 440 box-shadow: 0 6px 20px rgba(255,255,255,0.2); 441 } 442 443 /* Mobile Responsive Styles */ 444 @media (max-width: 900px) { 445 .main-header-title { font-size: 1.5rem; } 446 .horror-section { padding-top: 2.7rem; padding-bottom: 1.5rem; } 447 .horror-hero { padding: 6vw 4vw 3vw 4vw; } 448 .horror-title { font-size: 4rem; } 449 .horror-subtitle { font-size: 1.5rem; max-width: 100%; } 450 .horror-release { font-size: 1.2rem; } 451 .horror-description { font-size: 1.1rem; max-width: 100%; } 452 .horror-content { 453 flex-direction: column; 454 gap: 2rem; 455 padding: 0 4vw; 456 } 457 .horror-left, .horror-right { 458 flex: 1 1 100%; 459 min-width: auto; 460 } 461 .horror-section-title { font-size: 1.5rem; } 462 .horror-text { font-size: 1rem; } 463 .horror-features li { font-size: 0.9rem; } 464 .horror-cta { 465 font-family: 'Koulen', sans-serif; 466 font-size: 1.3rem; 467 padding: 0.7rem 2rem; 468 border-radius: 0.5rem; 469 } 470 .back-btn { 471 font-size: 1rem; 472 padding: 0.8rem 2rem; 473 border-radius: 0.5rem; 474 transition: none !important; 475 } 476 .back-btn:hover { 477 background: #fff !important; 478 color: #000 !important; 479 border: 2px solid #fff !important; 480 box-shadow: 0 4px 16px rgba(255,255,255,0.15) !important; 481 font-size: 1rem !important; 482 padding: 0.8rem 2rem !important; 483 } 484 } 485 486 @media (max-width: 600px) { 487 .main-header-title { font-size: 1.5rem; } 488 .horror-section { 489 padding-top: 2.5rem; 490 padding-bottom: 2rem; 491 min-height: 100vh; 492 display: flex; 493 flex-direction: column; 494 align-items: center; 495 } 496 .horror-hero { padding: 8vw 4vw 4vw 4vw; } 497 .horror-title { 498 font-size: 3rem; 499 font-weight: 900; 500 margin-bottom: 1rem; 501 line-height: 1.1; 502 } 503 .horror-subtitle { 504 font-size: 1.2rem; 505 font-weight: 600; 506 margin-bottom: 2rem; 507 line-height: 1.4; 508 } 509 .horror-release { font-size: 1.1rem; margin-bottom: 1.5rem; } 510 .horror-description { font-size: 1rem; margin-bottom: 2rem; } 511 .horror-content { padding: 0 4vw; } 512 .horror-section-title { font-size: 1.3rem; } 513 .horror-text { font-size: 0.9rem; } 514 .horror-features li { font-size: 0.8rem; } 515 .horror-cta { 516 font-family: 'Koulen', sans-serif; 517 font-size: 1.1rem; 518 padding: 1rem 2rem; 519 border-radius: 0.5rem; 520 } 521 .back-btn { 522 font-size: 1.2rem; 523 padding: 1rem 2.2rem; 524 margin: 3rem auto 0 auto; 525 width: fit-content; 526 min-width: 120px; 527 max-width: 80vw; 528 display: block; 529 border-radius: 2rem !important; 530 text-align: center; 531 text-transform: uppercase; 532 transition: none !important; 533 } 534 .back-btn:hover { 535 background: #000 !important; 536 color: #fff !important; 537 border: 1.5px solid #fff !important; 538 opacity: 0.92 !important; 539 font-size: 1.2rem !important; 540 padding: 1rem 2.2rem !important; 541 } 542 } 543 </style> 544 </head> 545 <body> 546 <div class="custom-cursor" id="cursor"></div> 547 <header class="main-header"> 548 <a href="../index.html" class="main-header-title" style="text-decoration: none; color: inherit;">PROOFOFCONCEPT</a> 549 <div class="hamburger-icon"> 550 <i class="fas fa-bars"></i> 551 </div> 552 </header> 553 554 <!-- Side Menu --> 555 <div class="side-menu" id="side-menu"> 556 <div class="side-menu-header"> 557 <div class="side-menu-close"> 558 <i class="fas fa-times"></i> 559 </div> 560 </div> 561 <nav class="side-menu-nav"> 562 <a href="../films/streaming.html" class="side-menu-link">WATCH</a> 563 <a href="../blog/" class="side-menu-link">READ</a> 564 <a href="../pages/store.html" class="side-menu-link">SHOP</a> 565 <div class="menu-spacer"></div> 566 <a href="../pages/contribute.html" class="side-menu-link">CONTRIBUTE</a> 567 <a href="../pages/digifest" class="side-menu-link">DIGIFEST</a> 568 <div class="menu-spacer"></div> 569 <a href="../pages/about" class="side-menu-link">ABOUT</a> 570 <a href="../pages/faq" class="side-menu-link">FAQ</a> 571 </nav> 572 <div class="side-menu-footer"> 573 <div class="side-menu-bottom-nav"> 574 <a href="../pages/terms" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 575 <a href="../pages/privacy" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 576 </div> 577 <div class="side-menu-social"> 578 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 579 <i class="fas fa-envelope"></i> 580 </a> 581 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 582 <i class="fab fa-instagram"></i> 583 </a> 584 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 585 <i class="fab fa-x-twitter"></i> 586 </a> 587 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 588 <i class="fab fa-github"></i> 589 </a> 590 </div> 591 </div> 592 </div> 593 594 <!-- Side Menu Overlay --> 595 <div class="side-menu-overlay" id="side-menu-overlay"></div> 596 597 598 599 <main class="horror-section" id="main-section"> 600 <div class="horror-hero"> 601 <div class="horror-title">HORROR</div> 602 <div class="horror-subtitle">AN ADAPTIVE EXPERIENCE</div> 603 <div class="horror-release">Q4 2026</div> 604 <div class="horror-description"> 605 A multimedia horror experience that adapts to your deepest fears, creating a personalized nightmare that evolves based on your psychological profile and real-time responses. 606 </div> 607 <a href="#coming-soon" class="horror-cta">Coming Soon</a> 608 </div> 609 610 <div class="horror-content"> 611 <div class="horror-left"> 612 <div class="horror-section-title">CONCEPT</div> 613 <div class="horror-text"> 614 HORROR represents a breakthrough in personalized entertainment, where artificial intelligence and psychological profiling create a unique horror experience for each viewer. Unlike traditional horror films, this project adapts in real-time to your fears, phobias, and psychological responses. 615 </div> 616 <div class="horror-text"> 617 The experience combines multiple media formats—film, audio, interactive elements, and environmental stimuli—to create an immersive horror narrative that feels specifically designed for you. Every jump scare, every atmospheric detail, every narrative twist is tailored to maximize your personal fear response. 618 </div> 619 </div> 620 621 <div class="horror-right"> 622 <div class="horror-section-title">TECHNOLOGY</div> 623 <div class="horror-text"> 624 Our proprietary AI system analyzes your psychological profile through various inputs: questionnaire responses, biometric data, social media patterns, and real-time physiological responses during the experience. 625 </div> 626 <ul class="horror-features"> 627 <li>Real-time biometric monitoring</li> 628 <li>AI-driven narrative adaptation</li> 629 <li>Multi-sensory horror elements</li> 630 <li>Psychological profiling algorithms</li> 631 <li>Adaptive sound and visual design</li> 632 </ul> 633 </div> 634 </div> 635 636 <a href="../index.html" class="back-btn" aria-label="Back to home">Back</a> 637 </main> 638 639 <!-- INFO Section --> 640 <section class="info-section"> 641 <div class="info-content"> 642 <div class="info-left"> 643 <h2 class="info-header">ABOUT</h2> 644 <p class="info-paragraph">PROOFOFCONCEPT is a multidisciplinary media studio focused on unconventional approaches to film which integrate new ideas and state-of-the-art technology, immersing the viewer into the media experience.</p> 645 </div> 646 647 <div class="info-center"> 648 <h2 class="info-header">INFO</h2> 649 <div class="info-links"> 650 <a href="../blog/" class="info-link">Articles</a> 651 <a href="../pages/privacy" class="info-link">Privacy Policy</a> 652 <a href="../pages/about" class="info-link">About</a> 653 <a href="../pages/faq" class="info-link">FAQ</a> 654 </div> 655 </div> 656 657 <!-- Newsletter Signup --> 658 <div class="info-newsletter"> 659 <h2 class="info-header">STAY UPDATED</h2> 660 <form class="newsletter-form" id="newsletter-form"> 661 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 662 <button type="submit" class="newsletter-button">Subscribe</button> 663 </form> 664 </div> 665 666 <div class="info-right"> 667 <h2 class="info-header">CONTACT</h2> 668 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 669 <div class="info-icons"> 670 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 671 <i class="fa-solid fa-envelope"></i> 672 </a> 673 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 674 <i class="fa-brands fa-instagram"></i> 675 </a> 676 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 677 <i class="fa-brands fa-x-twitter"></i> 678 </a> 679 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 680 <i class="fa-brands fa-github"></i> 681 </a> 682 </div> 683 </div> 684 </div> 685 </section> 686 687 <script> 688 // Custom cursor 689 const cursor = document.getElementById("cursor"); 690 document.addEventListener("mousemove", e => { 691 cursor.style.top = e.clientY + "px"; 692 cursor.style.left = e.clientX + "px"; 693 }); 694 document.addEventListener("mousedown", () => { 695 cursor.classList.add("expand"); 696 }); 697 document.addEventListener("mouseup", () => { 698 cursor.classList.remove("expand"); 699 }); 700 701 // Custom cursor hover effect for links and buttons 702 const allLinks = document.querySelectorAll('a, button'); 703 allLinks.forEach(link => { 704 link.addEventListener('mouseenter', () => { 705 cursor.classList.add('cursor-hover'); 706 }); 707 link.addEventListener('mouseleave', () => { 708 cursor.classList.remove('cursor-hover'); 709 }); 710 }); 711 712 // Newsletter form handling 713 document.getElementById('newsletter-form').addEventListener('submit', function(e) { 714 e.preventDefault(); 715 const email = this.querySelector('.newsletter-input').value; 716 const button = this.querySelector('.newsletter-button'); 717 const input = this.querySelector('.newsletter-input'); 718 719 // Here you would typically send the email to your backend 720 // For now, we'll show a smooth button transition 721 722 // Disable the input and button 723 input.disabled = true; 724 button.disabled = true; 725 726 // Smoothly transition button to "Thank you" 727 button.textContent = 'Thank you!'; 728 button.classList.add('thank-you'); 729 730 // Clear the form 731 input.value = ''; 732 733 // Button stays as "Thank you" until page refresh 734 // Form remains disabled to prevent multiple submissions 735 }); 736 </script> 737 738 <!-- Scripts --> 739 <script src="../assets/js/main.js"></script> 740 <script> 741 // Fade in on load 742 window.addEventListener('DOMContentLoaded', () => { 743 document.body.classList.add('fade-in'); 744 }); 745 746 // Fade out on link click 747 document.querySelectorAll('a').forEach(link => { 748 // Only for internal links 749 if (link.hostname === window.location.hostname) { 750 link.addEventListener('click', function(e) { 751 // Open in new tab or anchor links should not fade 752 if (link.target === '_blank' || link.href.includes('#')) return; 753 e.preventDefault(); 754 document.body.classList.add('fade'); 755 setTimeout(() => { 756 window.location = link.href; 757 }, 400); // match the CSS transition duration 758 }); 759 } 760 }); 761 </script> 762 </body> 763 </html>