:root{--obsidian-night: #0a0806;--volcanic-black: #151410;--raven-feather: #1c1915;--iron-oxide: #5d3c29;--moss-lichen: #8a9573;--ink-black: #0c0a06;--storm-cloud: #2a2825;--northern-light: rgba(138, 149, 115, 0.03);--viking-gold: #e5c686;--pale-gold: #f1e2bb;--warm-rust: #aa5c2f;--viking-red: #bb6a3d;--blood-ember: #8b3220;--frost-blue: #5a7c8f;--fog-white: #ede2c7;--teal-accent: #3a7c8f;--aurora-green: rgba(67, 142, 122, 0.15);--shadow-soft: 0 2px 8px rgba(0,0,0,0.3);--shadow-medium: 0 8px 32px rgba(0,0,0,0.4);--shadow-deep: 0 20px 60px rgba(0,0,0,0.5);--shadow-cinematic: 0 40px 120px rgba(0,0,0,0.7);--glow-ember: 0 0 40px rgba(187, 106, 61, 0.4);--glow-gold: 0 0 60px rgba(229, 198, 134, 0.3);--ease-cinematic: cubic-bezier(0.23, 1, 0.32, 1);--ease-dramatic: cubic-bezier(0.34, 1.56, 0.64, 1);--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);--type-base: clamp(16px, 1.2vw + 0.5rem, 20px);--type-scale: 1.25;--nav-height: 80px;--letterbox: 12vh;--golden-ratio: 1.618;--aspect-cinematic: 2.39;--blur-base: 0px;--scale-base: 1;--rotate-base: 0deg}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.loading-screen{position:fixed;inset:0;background:var(--obsidian-night);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity 1s var(--ease-cinematic)}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-rune{width:80px;height:80px;animation:runeRotate 2s infinite linear}@keyframes runeRotate{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}html{scroll-behavior:smooth;cursor:url('data:image/svg+xml;utf8,') 16 16,auto}body{margin:0;background:var(--obsidian-night);color:var(--viking-gold);font-family:"Inter",sans-serif;overflow-x:hidden;min-height:100vh;position:relative}.cursor-glow{position:fixed;width:400px;height:400px;background:radial-gradient(circle, rgba(229, 198, 134, 0.03) 0%, transparent 50%);pointer-events:none;transform:translate(-50%, -50%);z-index:1;transition:opacity .3s;mix-blend-mode:screen}.film-grain-global{position:fixed;inset:0;background:url('data:image/svg+xml;utf8,');pointer-events:none;z-index:9998;opacity:.4;mix-blend-mode:overlay;animation:grainShift .5s steps(10) infinite}@keyframes grainShift{0%,100%{transform:translate(0, 0)}10%{transform:translate(-1%, -1%)}20%{transform:translate(1%, 2%)}30%{transform:translate(-2%, 1%)}40%{transform:translate(1%, -1%)}50%{transform:translate(-1%, 2%)}60%{transform:translate(2%, 1%)}70%{transform:translate(-1%, -2%)}80%{transform:translate(1%, 1%)}90%{transform:translate(-2%, -1%)}}.navbar{position:fixed;bottom:0;width:100vw;height:var(--nav-height);background:linear-gradient(to top, rgba(10, 8, 6, 0.98) 0%, rgba(21, 20, 16, 0.95) 50%, rgba(28, 25, 21, 0.9) 100%);-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);z-index:1000;transform:translateY(100%);animation:navReveal 1s .5s var(--ease-cinematic) forwards;border-top:1px solid rgba(229,198,134,.1);box-shadow:0 -10px 40px rgba(0,0,0,.5)}@keyframes navReveal{to{transform:translateY(0)}}.navbar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, rgba(229, 198, 134, 0.05) 50%, transparent 100%);animation:navShimmer 8s ease-in-out infinite}@keyframes navShimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}.navbar ul{display:flex;justify-content:center;align-items:center;gap:clamp(15px,3vw,40px);height:100%;list-style:none;margin:0;padding:0;flex-wrap:wrap}.navbar a{position:relative;font-family:"Cinzel",serif;font-size:clamp(.8rem,1vw,1rem);color:var(--viking-gold);text-decoration:none;letter-spacing:.1em;padding:8px 16px;transition:all .5s var(--ease-cinematic);cursor:pointer;white-space:nowrap}.navbar a::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(229, 198, 134, 0.1) 0%, transparent 70%);opacity:0;transform:scale(0.8);transition:all .5s var(--ease-cinematic);border-radius:8px}.navbar a::after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg, var(--viking-gold), var(--warm-rust));transform:translateX(-50%);transition:width .5s var(--ease-cinematic)}.navbar a:hover::before{opacity:1;transform:scale(1.2)}.navbar a:hover::after{width:80%}.navbar a:hover{color:var(--fog-white);text-shadow:0 0 20px rgba(229,198,134,.8);transform:translateY(-2px)}.nav-indicator{position:absolute;bottom:0;height:3px;background:linear-gradient(90deg, transparent, var(--viking-red), transparent);transition:all .5s var(--ease-cinematic);border-radius:3px;box-shadow:0 0 20px rgba(187,106,61,.8)}.hero{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--obsidian-night)}.hero-bg{position:absolute;inset:-10%;width:120%;height:120%;background:url("images/_MG_0382.jpg") center/cover no-repeat;transform:scale(1.1);filter:brightness(0.7) contrast(1.2);animation:heroZoom 30s ease-in-out infinite alternate}@keyframes heroZoom{0%{transform:scale(1.1) translate(0, 0)}100%{transform:scale(1.15) translate(-2%, -1%)}}.hero-fog-layer{position:absolute;inset:0;opacity:.6;mix-blend-mode:screen}.hero-fog-1{background:url("https://assets.codepen.io/1468070/fog-low.png") 0 0/cover repeat-x;animation:fogDrift 60s linear infinite}.hero-fog-2{background:url("https://assets.codepen.io/1468070/fog-low.png") 0 0/cover repeat-x;animation:fogDrift 90s linear infinite reverse;opacity:.4}@keyframes fogDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0.9) 100%);pointer-events:none;z-index:2}.letterbox{position:absolute;left:0;width:100%;height:var(--letterbox);background:linear-gradient(to bottom, var(--obsidian-night) 0%, transparent 100%);z-index:3;pointer-events:none}.letterbox-top{top:0}.letterbox-bottom{bottom:0;transform:rotate(180deg)}.particle-field{position:absolute;inset:0;overflow:hidden;z-index:4}.ember{position:absolute;width:3px;height:3px;background:var(--viking-gold);border-radius:50%;filter:blur(1px);animation:emberFloat 20s linear infinite;box-shadow:0 0 6px var(--viking-gold)}@keyframes emberFloat{from{transform:translateY(100vh) translateX(0) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) translateX(100px) scale(1.5);opacity:0}}.hero-content{position:relative;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:0 5vw;text-align:center;transform:translateY(-10vh)}.hero-content>*{opacity:0;transform:translateY(40px);animation:contentReveal 1.2s var(--ease-cinematic) forwards}.hero-content>*:nth-child(1){animation-delay:.5s}.hero-content>*:nth-child(2){animation-delay:.7s}.hero-content>*:nth-child(3){animation-delay:.9s}.hero-content>*:nth-child(4){animation-delay:1.1s}@keyframes contentReveal{to{opacity:1;transform:translateY(0)}}.main-title{font-family:"Cinzel Decorative",serif;font-size:clamp(2.5rem,10vw,8rem);font-weight:700;letter-spacing:.2em;line-height:1;margin-bottom:.3em;position:relative;background:linear-gradient(135deg, var(--pale-gold) 0%, var(--viking-gold) 25%, var(--warm-rust) 50%, var(--viking-gold) 75%, var(--pale-gold) 100%);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text;animation:goldShift 8s ease-in-out infinite;filter:drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 40px rgba(229, 198, 134, 0.5))}@keyframes goldShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}.hero-subtitle{font-family:"Source Serif 4",serif;font-size:clamp(1rem,2vw,1.5rem);font-weight:300;font-style:italic;color:var(--pale-gold);opacity:.8;letter-spacing:.1em;margin-bottom:2em;text-shadow:0 2px 20px rgba(229,198,134,.5)}.runic-divider{width:150px;height:30px;margin:2em auto;opacity:.7;animation:runicPulse 4s ease-in-out infinite}@keyframes runicPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(229, 198, 134, 0.3))}50%{transform:scale(1.05);filter:drop-shadow(0 0 20px rgba(229, 198, 134, 0.6))}}.hero-quote{max-width:800px;font-family:"Source Serif 4",serif;font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.8;color:var(--fog-white);background:linear-gradient(135deg, rgba(10, 8, 6, 0.8) 0%, rgba(21, 20, 16, 0.6) 100%);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:2em 3em;border-radius:4px;border:1px solid rgba(229,198,134,.2);box-shadow:var(--shadow-deep);position:relative;overflow:hidden}.hero-quote::before{content:'"';position:absolute;top:-20px;left:10px;font-size:100px;font-family:"Cinzel Decorative",serif;color:rgba(229,198,134,.1)}.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);animation:scrollBounce 2s ease-in-out infinite}@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}.scroll-indicator svg{width:30px;height:30px;fill:var(--viking-gold);opacity:.6}.section{position:relative;padding:8vh 5vw;min-height:100vh;background:var(--volcanic-black);overflow:hidden}.section::before{content:"";position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(to bottom, rgba(10, 8, 6, 0.9) 0%, transparent 100%);pointer-events:none}.section-title{font-family:"Cinzel Decorative",serif;font-size:clamp(2rem,5vw,4rem);text-align:center;margin-bottom:4rem;position:relative;opacity:0;transform:translateY(50px);animation:titleReveal 1s var(--ease-cinematic) forwards;animation-play-state:paused}.section-title.in-view{animation-play-state:running}@keyframes titleReveal{to{opacity:1;transform:translateY(0)}}.section-title::after{content:"";position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:100px;height:3px;background:linear-gradient(90deg, transparent, var(--viking-gold), transparent);animation:lineExpand 1s .5s var(--ease-cinematic) forwards;animation-play-state:inherit;opacity:0}@keyframes lineExpand{to{width:200px;opacity:1}}.section-subheading{font-family:"Cinzel",serif;color:var(--viking-gold);text-align:center;margin:3rem 0 2rem;font-size:1.8rem}.credit-block{text-align:center;margin-bottom:3rem}.credit-block p{font-family:"Source Serif 4",serif;color:var(--fog-white);font-size:.95rem;font-style:italic;margin-bottom:.8rem}.credit-links{font-family:"Inter",sans-serif;color:rgba(237,226,199,.7);font-size:.75rem}.credit-link{color:var(--viking-gold);text-decoration:none;margin-right:2rem;transition:color .3s ease}.credit-link:last-child{margin-right:0}.gallery{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:30px;max-width:1200px;margin:0 auto}.gallery-item{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--storm-cloud);cursor:pointer;--rx: 0deg;--ry: 0deg;transform-style:preserve-3d;transform:perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) scale(0.95);opacity:0;animation:galleryReveal .8s var(--ease-cinematic) forwards;animation-play-state:paused;transition:all .3s var(--ease-cinematic)}.gallery-item.in-view{animation-play-state:running}.gallery-item.hidden{display:none}@keyframes galleryReveal{to{transform:scale(1);opacity:1}}.gallery-item::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8) 100%);opacity:0;transition:opacity .5s var(--ease-cinematic);z-index:1}.gallery-item:hover::before{opacity:1}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-cinematic);filter:brightness(0.9) contrast(1.1)}.gallery-item:hover img{transform:scale(1.1);filter:brightness(1) contrast(1.2)}.gallery-item::after{content:"VIEW";position:absolute;bottom:20px;left:20px;font-family:"Cinzel",serif;font-size:.9rem;letter-spacing:.2em;color:var(--fog-white);opacity:0;transform:translateY(20px);transition:all .5s var(--ease-cinematic);z-index:2}.gallery-item:hover::after{opacity:1;transform:translateY(0)}.gallery-caption{margin-top:1rem;text-align:center;font-family:"Source Serif 4",serif;font-size:.9rem;color:var(--fog-white);opacity:.8;font-style:italic}.see-more-btn{display:block;margin:3rem auto;padding:15px 40px;background:linear-gradient(135deg, var(--viking-gold), var(--warm-rust));color:var(--obsidian-night);border:none;border-radius:30px;font-family:"Cinzel",serif;font-size:1.1rem;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:all .3s var(--ease-cinematic);box-shadow:0 4px 20px rgba(229,198,134,.3)}.see-more-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(229,198,134,.5)}.see-more-btn.hidden{display:none}.image-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;animation:lightboxFadeIn .3s var(--ease-cinematic)}.image-lightbox.active{display:flex}@keyframes lightboxFadeIn{from{opacity:0}to{opacity:1}}.lightbox-content{position:relative;max-width:90vw;max-height:90vh;animation:lightboxZoomIn .3s var(--ease-cinematic)}@keyframes lightboxZoomIn{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}.lightbox-content img{width:100%;height:100%;object-fit:scale-down;border-radius:8px;box-shadow:var(--shadow-cinematic);max-width:95vw;max-height:85vh}.lightbox-close{position:absolute;top:20px;right:20px;width:50px;height:50px;background:rgba(229,198,134,.1);border:2px solid var(--viking-gold);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease-cinematic)}.lightbox-close:hover{background:rgba(229,198,134,.3);transform:rotate(90deg)}.lightbox-close::before,.lightbox-close::after{content:"";position:absolute;width:20px;height:2px;background:var(--viking-gold)}.lightbox-close::before{transform:rotate(45deg)}.lightbox-close::after{transform:rotate(-45deg)}.news-menu{display:flex;justify-content:center;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}.news-menu-item{font-family:"Cinzel",serif;font-size:1.1rem;color:var(--viking-gold);text-decoration:none;padding:10px 20px;border:1px solid rgba(229,198,134,.3);border-radius:4px;transition:all .3s var(--ease-cinematic);cursor:pointer}.news-menu-item:hover,.news-menu-item.active{background:var(--viking-gold);color:var(--obsidian-night);transform:translateY(-2px)}.news-content{display:none;max-width:1200px;margin:0 auto}.news-content.active{display:block}.news-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px;margin-bottom:3rem}.news-item{background:rgba(42,40,37,.6);border-radius:8px;overflow:hidden;border:1px solid rgba(229,198,134,.1);transition:all .3s var(--ease-cinematic)}.news-item:hover{transform:translateY(-5px);border-color:rgba(229,198,134,.3)}.news-item img{width:100%;height:200px;object-fit:cover}.news-item-content{padding:1.5rem}.news-item h3{font-family:"Cinzel",serif;color:var(--viking-gold);margin-bottom:.5rem;font-size:1.1rem}.news-item p{color:rgba(237,226,199,.8);line-height:1.6;font-size:.95rem}.golden-beetle{text-align:center;margin:4rem auto;max-width:600px;background:linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,198,134,.2);border-radius:8px;padding:3rem;box-shadow:var(--shadow-deep)}.golden-beetle img{max-width:200px;margin-bottom:2rem;border-radius:8px;box-shadow:var(--shadow-medium)}.golden-beetle h3{font-family:"Cinzel Decorative",serif;color:var(--viking-gold);margin-bottom:1rem;font-size:1.5rem}.golden-beetle p{color:var(--fog-white);line-height:1.7;font-style:italic}.famous-residents{background:linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,198,134,.2);border-radius:8px;padding:3rem;margin:4rem auto;max-width:800px;box-shadow:var(--shadow-deep)}.famous-residents h3{font-family:"Cinzel Decorative",serif;color:var(--viking-gold);text-align:center;margin-bottom:2rem;font-size:1.8rem}.famous-residents ul{list-style:none;padding:0}.famous-residents li{color:var(--fog-white);margin-bottom:1.5rem;font-size:1.1rem;line-height:1.6;position:relative;padding-left:2rem}.famous-residents li::before{content:"✦";position:absolute;left:0;color:var(--viking-gold);font-size:1.2rem}.timeline{position:relative;max-width:1000px;margin:0 auto;padding:4rem 0}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom, transparent 0%, var(--viking-gold) 10%, var(--viking-gold) 90%, transparent 100%);transform:translateX(-50%)}.timeline-event{position:relative;display:flex;align-items:center;margin-bottom:6rem;opacity:0;transform:translateY(50px);justify-content:center;gap:60px}.timeline-event.in-view{animation:timelineReveal 1s var(--ease-cinematic) forwards}@keyframes timelineReveal{to{opacity:1;transform:translateY(0)}}.timeline-event:nth-child(odd){flex-direction:row-reverse}.timeline-event:nth-child(even){flex-direction:row}.timeline-dot{position:relative;flex-shrink:0;width:24px;height:24px;background:var(--viking-gold);border:4px solid var(--volcanic-black);border-radius:50%;box-shadow:0 0 0 4px var(--viking-red),0 0 40px rgba(229,198,134,.5);z-index:10;cursor:pointer;transition:all .5s var(--ease-cinematic)}.timeline-dot:hover{transform:scale(1.3);box-shadow:0 0 0 6px var(--viking-red),0 0 60px rgba(229,198,134,.8)}.timeline-content{flex:0 1 600px;max-width:600px}.timeline-card{background:linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,198,134,.2);border-radius:8px;padding:0;position:relative;overflow:hidden;box-shadow:var(--shadow-deep);transition:all .5s var(--ease-cinematic);display:flex;gap:0}.timeline-film-image{width:200px;flex-shrink:0;position:relative;overflow:hidden;background:var(--storm-cloud);display:flex;align-items:center;justify-content:center}.timeline-film-image img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease-cinematic);filter:brightness(0.85) contrast(1.1)}.timeline-card:hover .timeline-film-image img{transform:scale(1.05);filter:brightness(1) contrast(1.2)}.timeline-film-image::after{content:"";position:absolute;inset:0;background:linear-gradient(to right, transparent 70%, rgba(0, 0, 0, 0.4) 100%);pointer-events:none}.timeline-card-content{padding:2.5rem;flex:1}.timeline-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--viking-gold), var(--warm-rust));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-cinematic)}.timeline-card:hover::before{transform:scaleX(1)}.timeline-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-cinematic);border-color:rgba(229,198,134,.4)}.timeline-year{display:inline-block;background:var(--viking-gold);color:var(--obsidian-night);padding:8px 20px;border-radius:30px;font-family:"Cinzel",serif;font-weight:600;font-size:1rem;letter-spacing:.1em;margin-bottom:1.5rem;box-shadow:0 4px 20px rgba(229,198,134,.3)}.timeline-title{font-family:"Cinzel",serif;font-size:1.8rem;color:var(--fog-white);margin-bottom:1rem;line-height:1.3}.timeline-subtitle{font-style:italic;font-size:1.2rem;color:rgba(237,226,199,.7);display:block;margin-top:.5rem}.timeline-desc{font-size:1.1rem;line-height:1.8;color:rgba(237,226,199,.9);margin-top:1.5rem}.timeline-event:nth-child(odd) .timeline-card{flex-direction:row-reverse}.timeline-event:nth-child(even) .timeline-card{flex-direction:row}.timeline-event:nth-child(odd) .timeline-card-content{text-align:right}.timeline-event:nth-child(even) .timeline-card-content{text-align:left}.timeline-event:nth-child(odd) .timeline-year{margin-left:auto;margin-right:0}.timeline-event:nth-child(even) .timeline-year{margin-right:auto;margin-left:0}.trailer-section{background:linear-gradient(180deg, var(--volcanic-black) 0%, var(--obsidian-night) 50%, var(--volcanic-black) 100%);position:relative;overflow:hidden}.trailer-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(229, 198, 134, 0.03) 0%, transparent 50%);pointer-events:none}.trailer-container{max-width:1000px;margin:0 auto;opacity:0;transform:translateY(50px)}.trailer-container.in-view{animation:trailerReveal 1s var(--ease-cinematic) forwards}@keyframes trailerReveal{to{opacity:1;transform:translateY(0)}}.trailer-frame{position:relative;background:var(--storm-cloud);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-cinematic);border:2px solid rgba(229,198,134,.1)}.play-button-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:12;background:rgba(229,198,134,.9);color:var(--obsidian-night);padding:15px 30px;border-radius:50px;font-family:"Cinzel",serif;font-weight:600;font-size:1.2rem;letter-spacing:.1em;cursor:pointer;transition:all .3s var(--ease-cinematic);border:2px solid var(--viking-gold);box-shadow:0 0 30px rgba(229,198,134,.5)}.play-button-overlay:hover{background:var(--fog-white);transform:translate(-50%, -50%) scale(1.1);box-shadow:0 0 50px rgba(229,198,134,.8)}.play-button-overlay.hidden{display:none}.film-strip{position:absolute;left:0;right:0;height:40px;background:repeating-linear-gradient(90deg, var(--obsidian-night) 0px, var(--obsidian-night) 20px, rgba(229, 198, 134, 0.1) 20px, rgba(229, 198, 134, 0.1) 40px);z-index:10;display:flex;align-items:center;justify-content:center}.film-strip::before,.film-strip::after{content:"";position:absolute;width:100%;height:100%;background:repeating-linear-gradient(90deg, transparent 0px, transparent 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 12px, transparent 12px, transparent 20px)}.film-strip-top{top:0}.film-strip-bottom{bottom:0}.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:var(--obsidian-night)}.video-wrapper iframe{position:absolute;top:40px;left:0;width:100%;height:calc(100% - 80px);border:none}.trailer-caption{position:absolute;top:50px;left:50%;transform:translateX(-50%);text-align:center;z-index:11;background:rgba(10,8,6,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 25px;border-radius:25px;border:1px solid rgba(229,198,134,.2);pointer-events:none}.trailer-caption p{margin:0;font-family:"Source Serif 4",serif;font-style:italic;color:var(--viking-gold);font-size:1rem;letter-spacing:.05em}.reviews-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:30px}.review-card{background:linear-gradient(135deg, rgba(33, 36, 32, 0.9) 0%, rgba(42, 40, 37, 0.9) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,198,134,.15);border-radius:8px;padding:2.5rem;position:relative;overflow:hidden;opacity:0;transform:translateY(30px);transition:all .5s var(--ease-cinematic)}.review-card.in-view{animation:reviewReveal .8s var(--ease-cinematic) forwards}.review-card:nth-child(1){animation-delay:0s}.review-card:nth-child(2){animation-delay:.1s}.review-card:nth-child(3){animation-delay:.2s}.review-card:nth-child(4){animation-delay:.3s}.review-card:nth-child(5){animation-delay:.4s}.review-card:nth-child(6){animation-delay:.5s}.review-card:nth-child(7){animation-delay:.6s}.review-card:nth-child(8){animation-delay:.7s}.review-card:nth-child(9){animation-delay:.8s}.review-card:nth-child(10){animation-delay:.9s}@keyframes reviewReveal{to{opacity:1;transform:translateY(0)}}.review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-cinematic);border-color:rgba(229,198,134,.3)}.review-quote{font-family:"Source Serif 4",serif;font-size:1.2rem;font-style:italic;line-height:1.7;color:var(--fog-white);margin-bottom:1.5rem;position:relative;padding-left:2.5rem;min-height:60px}.review-quote::before{content:'"';position:absolute;left:0;top:-10px;font-size:50px;font-family:"Cinzel Decorative",serif;color:var(--viking-gold);opacity:.3}.review-author{font-family:"Cinzel",serif;font-size:1rem;color:var(--viking-gold);text-align:right;letter-spacing:.1em}.efa-container{max-width:1200px;margin:0 auto}.efa-content{display:flex;align-items:center;gap:4rem;margin-bottom:4rem;opacity:0;transform:translateY(50px)}.efa-content.in-view{animation:efaReveal 1s var(--ease-cinematic) forwards}@keyframes efaReveal{to{opacity:1;transform:translateY(0)}}.efa-badge{flex-shrink:0;animation:badgeRotate 20s linear infinite}@keyframes badgeRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.efa-badge svg{filter:drop-shadow(0 0 30px rgba(229, 198, 134, 0.3))}.efa-text{flex:1}.efa-intro{font-size:1.3rem;line-height:1.8;color:var(--fog-white);margin-bottom:3rem;font-family:"Source Serif 4",serif}.efa-achievements{display:grid;gap:2rem}.achievement-card{background:linear-gradient(135deg, rgba(42, 40, 37, 0.6) 0%, rgba(33, 36, 32, 0.6) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,198,134,.1);border-radius:8px;padding:2rem;position:relative;overflow:hidden;opacity:0;transform:translateX(-30px);transition:all .5s var(--ease-cinematic)}.achievement-card.in-view{animation:achievementSlide .8s var(--ease-cinematic) forwards}.achievement-card:nth-child(2){animation-delay:.2s}.achievement-card:nth-child(3){animation-delay:.4s}@keyframes achievementSlide{to{opacity:1;transform:translateX(0)}}.achievement-card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom, var(--viking-gold), var(--warm-rust));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-cinematic)}.achievement-card:hover::before{transform:scaleY(1)}.achievement-card:hover{transform:translateX(10px);border-color:rgba(229,198,134,.3)}.achievement-card h3{font-family:"Cinzel",serif;font-size:1.3rem;color:var(--viking-gold);margin-bottom:1rem;letter-spacing:.05em}.achievement-card p{font-size:1.05rem;line-height:1.7;color:rgba(237,226,199,.9)}.achievement-card em{color:var(--pale-gold);font-style:italic}.contact-content{max-width:600px;margin:0 auto;text-align:center;background:linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,198,134,.2);border-radius:8px;padding:3rem;box-shadow:var(--shadow-deep)}.contact-email{font-family:"Cinzel",serif;font-size:clamp(1.2rem,3vw,1.5rem);color:var(--viking-gold);margin:2rem 0;letter-spacing:.05em;transition:all .3s var(--ease-cinematic);cursor:pointer;word-break:break-all;padding:10px;border-radius:4px;border:1px solid rgba(229,198,134,.2)}.contact-email:hover{color:var(--fog-white);text-shadow:0 0 20px rgba(229,198,134,.8);transform:scale(1.05);border-color:rgba(229,198,134,.4)}.trilogy-info{opacity:0;transform:translateY(50px)}.trilogy-info.in-view{animation:trilogyReveal 1.2s var(--ease-cinematic) forwards}@keyframes trilogyReveal{to{opacity:1;transform:translateY(0)}}.script-section{background:var(--volcanic-black);padding:4rem 2rem}.script-container{max-width:1000px;margin:0 auto;background:rgba(10,8,6,.8);border:1px solid rgba(229,198,134,.2);border-radius:8px;padding:3rem;font-family:"Inter",sans-serif;color:var(--fog-white);font-size:1.1rem;line-height:1.8;overflow-x:auto;position:relative;overflow:hidden}.script-container h3{font-family:"Cinzel Decorative",serif;color:var(--viking-gold);text-align:center;margin-bottom:2rem;font-size:1.8rem}.tour-section{background:linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,198,134,.2);border-radius:8px;padding:3rem;margin:4rem auto;max-width:800px;box-shadow:var(--shadow-deep);text-align:center}.tour-section h3{font-family:"Cinzel Decorative",serif;color:var(--viking-gold);margin-bottom:2rem;font-size:2rem}.tour-info{color:var(--fog-white);font-size:1.1rem;line-height:1.8;margin-bottom:2rem}.tour-price{font-family:"Cinzel",serif;font-size:1.5rem;color:var(--viking-gold);margin:1.5rem 0;font-weight:600}.tour-location{font-style:italic;color:rgba(237,226,199,.8);margin-top:1.5rem}.family-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:40px;max-width:1000px;margin:0 auto}.family-member{text-align:center;opacity:0;transform:translateY(30px) scale(0.9)}.family-member.in-view{animation:familyReveal .8s var(--ease-cinematic) forwards}@keyframes familyReveal{to{opacity:1;transform:translateY(0) scale(1)}}.family-portrait{position:relative;width:180px;height:180px;margin:0 auto 1.5rem;border-radius:50%;overflow:hidden;background:var(--storm-cloud);box-shadow:0 0 0 4px var(--viking-gold),0 0 0 8px var(--volcanic-black),var(--shadow-deep);transition:all .5s var(--ease-cinematic);cursor:pointer;transform:translateY(-20px)}.family-portrait::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg, transparent, var(--viking-gold), transparent);animation:portraitSpin 3s linear infinite;opacity:0;transition:opacity .5s}.family-portrait:hover::before{opacity:.5}@keyframes portraitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.family-portrait img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease-cinematic);filter:brightness(1.1) contrast(1.1)}.family-portrait:hover img{transform:scale(1.1);filter:brightness(1.2) contrast(1.2)}.family-name{font-family:"Cinzel Decorative",serif;font-size:1.2rem;color:var(--fog-white);margin-bottom:.5rem;letter-spacing:.1em}.family-full-name{font-family:"Source Serif 4",serif;font-size:1rem;color:rgba(237,226,199,.7);font-style:italic}.footer{padding:3rem 0 8rem;text-align:center;color:rgba(237,226,199,.5);font-size:.9rem;letter-spacing:.1em}.scroll-top{position:fixed;right:20px;bottom:150px;background:rgba(10,8,6,.8);color:var(--viking-gold);border:1px solid rgba(229,198,134,.3);border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:all .3s var(--ease-cinematic);z-index:1001}.scroll-top.show{opacity:1;pointer-events:auto}.scroll-top:hover{background:rgba(229,198,134,.9);color:var(--obsidian-night);transform:translateY(-3px);box-shadow:0 6px 25px rgba(0,0,0,.6),0 0 40px rgba(229,198,134,.4)}@media(max-width: 768px){.scroll-top{display:none !important}}@media(max-width: 480px){.scroll-top{display:none !important}}@media(min-width: 390px) and (max-width: 430px) and (min-height: 844px) and (max-height: 932px){.scroll-top{display:none !important}}@media(max-height: 600px) and (orientation: landscape){.scroll-top{display:none !important}}@media(max-width: 768px){.navbar{height:60px}.navbar ul{gap:8px;padding:0 8px;flex-wrap:wrap;justify-content:center}.navbar a{font-size:.65rem;padding:4px 8px;white-space:nowrap}.main-title{font-size:clamp(2rem,12vw,4rem)}.hero-quote{display:none}.contact-email{font-size:1.1rem;word-break:break-word;padding:15px}.news-menu{flex-direction:column;align-items:center;gap:1rem}.news-grid{grid-template-columns:1fr}.golden-beetle{padding:2rem}.golden-beetle img{max-width:150px}.gallery{grid-template-columns:1fr;gap:20px}.see-more-btn{padding:12px 30px;font-size:1rem;margin:2rem auto}.lightbox-content{max-width:95vw;max-height:85vh;margin:0 10px}.lightbox-content img{max-width:95vw;max-height:80vh}.lightbox-close{top:10px;right:10px;width:40px;height:40px}.lightbox-close::before,.lightbox-close::after{width:16px}.timeline-line{left:30px}.timeline-event{flex-direction:row !important;text-align:left !important;margin-left:0;padding-left:60px;gap:20px;justify-content:flex-start}.timeline-dot{position:absolute;left:30px}.timeline-content{flex:1}.timeline-card{flex-direction:column !important}.timeline-card-content{text-align:left !important}.timeline-year{margin-left:0 !important;margin-right:auto !important}.timeline-film-image{width:100%;height:200px}.family-grid{grid-template-columns:repeat(2, 1fr);gap:30px}.efa-content{flex-direction:column;gap:2rem;text-align:center}.efa-badge{margin:0 auto}.achievement-card{transform:translateX(0) !important}.reviews-container{grid-template-columns:1fr}.review-card{transform:translateY(30px) !important}.trailer-caption{top:50px;padding:6px 15px;font-size:.8rem}.play-button-overlay{padding:10px 20px;font-size:1rem}.film-strip{height:30px}.video-wrapper iframe{top:30px;height:calc(100% - 60px)}.script-container{padding:2rem;font-size:.8rem}.tour-section,.famous-residents{padding:2rem;margin:2rem auto}.achievement-card{margin-bottom:1.5rem}.particle-field{display:none}.cursor-glow{display:none}.film-grain-global{display:none;opacity:.2}.hero-bg,.hero-fog-1,.hero-fog-2,.scroll-indicator{animation:none !important}html{cursor:auto}[style*=backdrop-filter]{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}.trilogy-info{padding:2rem !important;margin:3rem auto !important}.trilogy-info h3{font-size:1.5rem !important}.trilogy-info>div>div[style*=grid]{grid-template-columns:1fr !important;gap:1rem !important}}@media(max-width: 480px){.navbar a{font-size:.6rem;padding:3px 6px}.contact-email{font-size:1rem}.family-grid{grid-template-columns:1fr}.see-more-btn{padding:10px 25px;font-size:.9rem}.gallery-item::after{font-size:.8rem;bottom:15px;left:15px}.news-menu-item{font-size:.9rem;padding:8px 15px}.trilogy-info{padding:1.5rem !important;margin:2rem auto !important}.trilogy-info h3{font-size:1.3rem !important}}.fade-in{opacity:0;transition:opacity 1s var(--ease-cinematic)}.fade-in.loaded{opacity:1}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus{outline:2px solid var(--viking-gold);outline-offset:2px}::selection{background:var(--viking-gold);color:var(--obsidian-night)}.hidden{display:none !important} /*# sourceMappingURL=styles.css.map */ :root { /* Deep Nordic palette with expanded range */ --obsidian-night: #0a0806; --volcanic-black: #151410; --raven-feather: #1c1915; --iron-oxide: #5d3c29; --moss-lichen: #8a9573; --ink-black: #0c0a06; --storm-cloud: #2a2825; --northern-light: rgba(138, 149, 115, 0.03); /* Cinematic color temperatures */ --viking-gold: #e5c686; --pale-gold: #f1e2bb; --warm-rust: #aa5c2f; --viking-red: #bb6a3d; --blood-ember: #8b3220; --frost-blue: #5a7c8f; --fog-white: #ede2c7; --teal-accent: #3a7c8f; --aurora-green: rgba(67, 142, 122, 0.15); /* Cinematic shadows & glows */ --shadow-soft: 0 2px 8px rgba(0,0,0,0.3); --shadow-medium: 0 8px 32px rgba(0,0,0,0.4); --shadow-deep: 0 20px 60px rgba(0,0,0,0.5); --shadow-cinematic: 0 40px 120px rgba(0,0,0,0.7); --glow-ember: 0 0 40px rgba(187, 106, 61, 0.4); --glow-gold: 0 0 60px rgba(229, 198, 134, 0.3); /* Film-inspired timing curves */ --ease-cinematic: cubic-bezier(0.23, 1, 0.32, 1); --ease-dramatic: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Responsive type scale */ --type-base: clamp(16px, 1.2vw + 0.5rem, 20px); --type-scale: 1.25; /* Cinematic dimensions */ --nav-height: 80px; --letterbox: 12vh; --golden-ratio: 1.618; --aspect-cinematic: 2.39; /* Animation tokens */ --blur-base: 0px; --scale-base: 1; --rotate-base: 0deg; } /* Performance optimizations */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Loading Screen */ .loading-screen { position: fixed; inset: 0; background: var(--obsidian-night); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 1s var(--ease-cinematic); } .loading-screen.fade-out { opacity: 0; pointer-events: none; } .loading-rune { width: 80px; height: 80px; animation: runeRotate 2s infinite linear; } @keyframes runeRotate { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } to { transform: rotate(360deg) scale(1); } } /* Base Setup */ html { scroll-behavior: smooth; cursor: url('data:image/svg+xml;utf8,') 16 16, auto; } body { margin: 0; background: var(--obsidian-night); color: var(--viking-gold); font-family: 'Inter', sans-serif; overflow-x: hidden; min-height: 100vh; position: relative; } /* Custom Cursor Effects */ .cursor-glow { position: fixed; width: 400px; height: 400px; background: radial-gradient(circle, rgba(229, 198, 134, 0.03) 0%, transparent 50%); pointer-events: none; transform: translate(-50%, -50%); z-index: 1; transition: opacity 0.3s; mix-blend-mode: screen; } /* Cinematic Grain Overlay */ .film-grain-global { position: fixed; inset: 0; background: url('data:image/svg+xml;utf8,'); pointer-events: none; z-index: 9998; opacity: 0.4; mix-blend-mode: overlay; animation: grainShift 0.5s steps(10) infinite; } @keyframes grainShift { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-1%, -1%); } 20% { transform: translate(1%, 2%); } 30% { transform: translate(-2%, 1%); } 40% { transform: translate(1%, -1%); } 50% { transform: translate(-1%, 2%); } 60% { transform: translate(2%, 1%); } 70% { transform: translate(-1%, -2%); } 80% { transform: translate(1%, 1%); } 90% { transform: translate(-2%, -1%); } } /* Navigation - Cinematic Enhancement */ .navbar { position: fixed; bottom: 0; width: 100vw; height: var(--nav-height); background: linear-gradient(to top, rgba(10, 8, 6, 0.98) 0%, rgba(21, 20, 16, 0.95) 50%, rgba(28, 25, 21, 0.9) 100%); backdrop-filter: blur(20px) saturate(130%); z-index: 1000; transform: translateY(0); border-top: 1px solid rgba(229, 198, 134, 0.1); box-shadow: 0 -10px 40px rgba(0,0,0,0.5); } .navbar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(229, 198, 134, 0.05) 50%, transparent 100%); animation: navShimmer 8s ease-in-out infinite; } @keyframes navShimmer { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .navbar ul { display: flex; justify-content: center; align-items: center; gap: clamp(15px, 3vw, 40px); height: 100%; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .navbar a { position: relative; font-family: 'Cinzel', serif; font-size: clamp(0.8rem, 1vw, 1rem); color: var(--viking-gold); text-decoration: none; letter-spacing: 0.1em; padding: 8px 16px; transition: all 0.5s var(--ease-cinematic); cursor: pointer; white-space: nowrap; } .navbar a::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(229, 198, 134, 0.1) 0%, transparent 70%); opacity: 0; transform: scale(0.8); transition: all 0.5s var(--ease-cinematic); border-radius: 8px; } .navbar a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, var(--viking-gold), var(--warm-rust)); transform: translateX(-50%); transition: width 0.5s var(--ease-cinematic); } .navbar a:hover::before { opacity: 1; transform: scale(1.2); } .navbar a:hover::after { width: 80%; } .navbar a:hover { color: var(--fog-white); text-shadow: 0 0 20px rgba(229, 198, 134, 0.8); transform: translateY(-2px); } /* Active section indicator */ .nav-indicator { position: absolute; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--viking-red), transparent); transition: all 0.5s var(--ease-cinematic); border-radius: 3px; box-shadow: 0 0 20px rgba(187, 106, 61, 0.8); } /* Hero Section - Full Cinematic Treatment */ .hero { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: var(--obsidian-night); } /* Parallax Layers */ .hero-bg { position: absolute; inset: -10%; width: 120%; height: 120%; background: url('images/_MG_0382.jpg') center/cover no-repeat; transform: scale(1.1); filter: brightness(0.7) contrast(1.2); animation: heroZoom 30s ease-in-out infinite alternate; } @keyframes heroZoom { 0% { transform: scale(1.1) translate(0, 0); } 100% { transform: scale(1.15) translate(-2%, -1%); } } .hero-fog-layer { position: absolute; inset: 0; opacity: 0.6; mix-blend-mode: screen; } .hero-fog-1 { background: url('https://assets.codepen.io/1468070/fog-low.png') 0 0/cover repeat-x; animation: fogDrift 60s linear infinite; } .hero-fog-2 { background: url('https://assets.codepen.io/1468070/fog-low.png') 0 0/cover repeat-x; animation: fogDrift 90s linear infinite reverse; opacity: 0.4; } @keyframes fogDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Cinematic Vignette */ .hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.7) 90%, rgba(0,0,0,0.9) 100%); pointer-events: none; z-index: 2; } /* Letterbox Effect */ .letterbox { position: absolute; left: 0; width: 100%; height: var(--letterbox); background: linear-gradient(to bottom, var(--obsidian-night) 0%, transparent 100%); z-index: 3; pointer-events: none; } .letterbox-top { top: 0; } .letterbox-bottom { bottom: 0; transform: rotate(180deg); } /* Particle System */ .particle-field { position: absolute; inset: 0; overflow: hidden; z-index: 4; } .ember { position: absolute; width: 3px; height: 3px; background: var(--viking-gold); border-radius: 50%; filter: blur(1px); animation: emberFloat 20s linear infinite; box-shadow: 0 0 6px var(--viking-gold); } @keyframes emberFloat { from { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(-100vh) translateX(100px) scale(1.5); opacity: 0; } } /* Hero Content with Reveal Animation */ .hero-content { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 0 5vw; text-align: center; } .hero-content > * { opacity: 0; transform: translateY(40px); animation: contentReveal 1.2s var(--ease-cinematic) forwards; } .hero-content > *:nth-child(1) { animation-delay: 0.5s; } .hero-content > *:nth-child(2) { animation-delay: 0.7s; } .hero-content > *:nth-child(3) { animation-delay: 0.9s; } .hero-content > *:nth-child(4) { animation-delay: 1.1s; } @keyframes contentReveal { to { opacity: 1; transform: translateY(0); } } /* Cinematic Title Treatment */ .main-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(2.5rem, 10vw, 8rem); font-weight: 700; letter-spacing: 0.2em; line-height: 1; margin-bottom: 0.3em; position: relative; /* Multi-layer text effect */ background: linear-gradient(135deg, var(--pale-gold) 0%, var(--viking-gold) 25%, var(--warm-rust) 50%, var(--viking-gold) 75%, var(--pale-gold) 100%); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShift 8s ease-in-out infinite; /* 3D text shadow */ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.8)) drop-shadow(0 2px 1px rgba(0,0,0,0.7)) drop-shadow(0 3px 2px rgba(0,0,0,0.6)) drop-shadow(0 4px 3px rgba(0,0,0,0.5)) drop-shadow(0 10px 20px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(229, 198, 134, 0.5)); } @keyframes goldShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Glowing subtitle */ .hero-subtitle { font-family: 'Source Serif 4', serif; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 300; font-style: italic; color: var(--pale-gold); opacity: 0.8; letter-spacing: 0.1em; margin-bottom: 2em; text-shadow: 0 2px 20px rgba(229, 198, 134, 0.5); } /* Runic Divider Animation */ .runic-divider { width: 150px; height: 30px; margin: 2em auto; opacity: 0.7; animation: runicPulse 4s ease-in-out infinite; } @keyframes runicPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(229, 198, 134, 0.3)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(229, 198, 134, 0.6)); } } /* Hero Quote */ .hero-quote { max-width: 800px; font-family: 'Source Serif 4', serif; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.8; color: var(--fog-white); background: linear-gradient(135deg, rgba(10, 8, 6, 0.8) 0%, rgba(21, 20, 16, 0.6) 100%); backdrop-filter: blur(20px); padding: 2em 3em; border-radius: 4px; border: 1px solid rgba(229, 198, 134, 0.2); box-shadow: var(--shadow-deep); position: relative; overflow: hidden; } .hero-quote::before { content: '"'; position: absolute; top: -20px; left: 10px; font-size: 100px; font-family: 'Cinzel Decorative', serif; color: rgba(229, 198, 134, 0.1); } /* Scroll Indicator */ .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } .scroll-indicator svg { width: 30px; height: 30px; fill: var(--viking-gold); opacity: 0.6; } /* Section Transitions */ .section { position: relative; padding: 8vh 5vw; min-height: 100vh; background: var(--volcanic-black); overflow: hidden; } .section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, rgba(10, 8, 6, 0.9) 0%, transparent 100%); pointer-events: none; } /* Section Titles with Cinematic Reveal */ .section-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(2rem, 5vw, 4rem); text-align: center; margin-bottom: 4rem; position: relative; opacity: 0; transform: translateY(50px); animation: titleReveal 1s var(--ease-cinematic) forwards; animation-play-state: paused; } .section-title.in-view { animation-play-state: running; } @keyframes titleReveal { to { opacity: 1; transform: translateY(0); } } .section-title::after { content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--viking-gold), transparent); animation: lineExpand 1s 0.5s var(--ease-cinematic) forwards; animation-play-state: inherit; opacity: 0; } @keyframes lineExpand { to { width: 200px; opacity: 1; } } /* Gallery with Cinematic Hover */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } .gallery-item { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; background: var(--storm-cloud); cursor: pointer; transform: scale(0.95); opacity: 0; animation: galleryReveal 0.8s var(--ease-cinematic) forwards; animation-play-state: paused; transition: all 0.3s var(--ease-cinematic); } .gallery-item.in-view { animation-play-state: running; } .gallery-item.hidden { display: none; } @keyframes galleryReveal { to { transform: scale(1); opacity: 1; } } .gallery-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.8) 100%); opacity: 0; transition: opacity 0.5s var(--ease-cinematic); z-index: 1; } .gallery-item:hover::before { opacity: 1; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-cinematic); filter: brightness(0.9) contrast(1.1); } .gallery-item:hover img { transform: scale(1.1); filter: brightness(1) contrast(1.2); } .gallery-item::after { content: 'VIEW'; position: absolute; bottom: 20px; left: 20px; font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.2em; color: var(--fog-white); opacity: 0; transform: translateY(20px); transition: all 0.5s var(--ease-cinematic); z-index: 2; } .gallery-item:hover::after { opacity: 1; transform: translateY(0); } .gallery-caption { margin-top: 1rem; text-align: center; font-family: 'Source Serif 4', serif; font-size: 0.9rem; color: var(--fog-white); opacity: 0.8; font-style: italic; } /* See More Button */ .see-more-btn { display: block; margin: 3rem auto; padding: 15px 40px; background: linear-gradient(135deg, var(--viking-gold), var(--warm-rust)); color: var(--obsidian-night); border: none; border-radius: 30px; font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s var(--ease-cinematic); box-shadow: 0 4px 20px rgba(229, 198, 134, 0.3); } .see-more-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(229, 198, 134, 0.5); } .see-more-btn.hidden { display: none; } /* Image Lightbox */ .image-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; animation: lightboxFadeIn 0.3s var(--ease-cinematic); } .image-lightbox.active { display: flex; } @keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } } .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; animation: lightboxZoomIn 0.3s var(--ease-cinematic); } @keyframes lightboxZoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lightbox-content img { width: 100%; height: 100%; object-fit: scale-down; border-radius: 8px; box-shadow: var(--shadow-cinematic); max-width: 95vw; max-height: 85vh; } .lightbox-close { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background: rgba(229, 198, 134, 0.1); border: 2px solid var(--viking-gold); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease-cinematic); } .lightbox-close:hover { background: rgba(229, 198, 134, 0.3); transform: rotate(90deg); } .lightbox-close::before, .lightbox-close::after { content: ''; position: absolute; width: 20px; height: 2px; background: var(--viking-gold); } .lightbox-close::before { transform: rotate(45deg); } .lightbox-close::after { transform: rotate(-45deg); } /* News Menu */ .news-menu { display: flex; justify-content: center; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; } .news-menu-item { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--viking-gold); text-decoration: none; padding: 10px 20px; border: 1px solid rgba(229, 198, 134, 0.3); border-radius: 4px; transition: all 0.3s var(--ease-cinematic); cursor: pointer; } .news-menu-item:hover, .news-menu-item.active { background: var(--viking-gold); color: var(--obsidian-night); transform: translateY(-2px); } .news-content { display: none; max-width: 1200px; margin: 0 auto; } .news-content.active { display: block; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 3rem; } .news-item { background: rgba(42, 40, 37, 0.6); border-radius: 8px; overflow: hidden; border: 1px solid rgba(229, 198, 134, 0.1); transition: all 0.3s var(--ease-cinematic); } .news-item:hover { transform: translateY(-5px); border-color: rgba(229, 198, 134, 0.3); } .news-item img { width: 100%; height: 200px; object-fit: cover; } .news-item-content { padding: 1.5rem; } .news-item h3 { font-family: 'Cinzel', serif; color: var(--viking-gold); margin-bottom: 0.5rem; font-size: 1.1rem; } .news-item p { color: rgba(237, 226, 199, 0.8); line-height: 1.6; font-size: 0.95rem; } .golden-beetle { text-align: center; margin: 4rem auto; max-width: 600px; background: linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(229, 198, 134, 0.2); border-radius: 8px; padding: 3rem; box-shadow: var(--shadow-deep); } .golden-beetle img { max-width: 200px; margin-bottom: 2rem; border-radius: 8px; box-shadow: var(--shadow-medium); } .golden-beetle h3 { font-family: 'Cinzel Decorative', serif; color: var(--viking-gold); margin-bottom: 1rem; font-size: 1.5rem; } .golden-beetle p { color: var(--fog-white); line-height: 1.7; font-style: italic; } /* Famous Residents Section */ .famous-residents { background: linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(229, 198, 134, 0.2); border-radius: 8px; padding: 3rem; margin: 4rem auto; max-width: 800px; box-shadow: var(--shadow-deep); } .famous-residents h3 { font-family: 'Cinzel Decorative', serif; color: var(--viking-gold); text-align: center; margin-bottom: 2rem; font-size: 1.8rem; } .famous-residents ul { list-style: none; padding: 0; } .famous-residents li { color: var(--fog-white); margin-bottom: 1.5rem; font-size: 1.1rem; line-height: 1.6; position: relative; padding-left: 2rem; } .famous-residents li::before { content: '✦'; position: absolute; left: 0; color: var(--viking-gold); font-size: 1.2rem; } /* Timeline - Cinematic Journey */ .timeline { position: relative; max-width: 1000px; margin: 0 auto; padding: 4rem 0; } .timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent 0%, var(--viking-gold) 10%, var(--viking-gold) 90%, transparent 100%); transform: translateX(-50%); } .timeline-event { position: relative; display: flex; align-items: center; margin-bottom: 6rem; opacity: 0; transform: translateY(50px); justify-content: center; gap: 60px; } .timeline-event.in-view { animation: timelineReveal 1s var(--ease-cinematic) forwards; } @keyframes timelineReveal { to { opacity: 1; transform: translateY(0); } } .timeline-event:nth-child(odd) { flex-direction: row-reverse; } .timeline-event:nth-child(even) { flex-direction: row; } .timeline-dot { position: relative; flex-shrink: 0; width: 24px; height: 24px; background: var(--viking-gold); border: 4px solid var(--volcanic-black); border-radius: 50%; box-shadow: 0 0 0 4px var(--viking-red), 0 0 40px rgba(229, 198, 134, 0.5); z-index: 10; cursor: pointer; transition: all 0.5s var(--ease-cinematic); } .timeline-dot:hover { transform: scale(1.3); box-shadow: 0 0 0 6px var(--viking-red), 0 0 60px rgba(229, 198, 134, 0.8); } .timeline-content { flex: 0 1 600px; max-width: 600px; } .timeline-card { background: linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(229, 198, 134, 0.2); border-radius: 8px; padding: 0; position: relative; overflow: hidden; box-shadow: var(--shadow-deep); transition: all 0.5s var(--ease-cinematic); display: flex; gap: 0; } .timeline-film-image { width: 200px; flex-shrink: 0; position: relative; overflow: hidden; background: var(--storm-cloud); display: flex; align-items: center; justify-content: center; } .timeline-film-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s var(--ease-cinematic); filter: brightness(0.85) contrast(1.1); } .timeline-card:hover .timeline-film-image img { transform: scale(1.05); filter: brightness(1) contrast(1.2); } .timeline-film-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 70%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; } .timeline-card-content { padding: 2.5rem; flex: 1; } .timeline-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--viking-gold), var(--warm-rust)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-cinematic); } .timeline-card:hover::before { transform: scaleX(1); } .timeline-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-cinematic); border-color: rgba(229, 198, 134, 0.4); } .timeline-year { display: inline-block; background: var(--viking-gold); color: var(--obsidian-night); padding: 8px 20px; border-radius: 30px; font-family: 'Cinzel', serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 1.5rem; box-shadow: 0 4px 20px rgba(229, 198, 134, 0.3); } .timeline-title { font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--fog-white); margin-bottom: 1rem; line-height: 1.3; } .timeline-subtitle { font-style: italic; font-size: 1.2rem; color: rgba(237, 226, 199, 0.7); display: block; margin-top: 0.5rem; } .timeline-desc { font-size: 1.1rem; line-height: 1.8; color: rgba(237, 226, 199, 0.9); margin-top: 1.5rem; } .timeline-event:nth-child(odd) .timeline-card { flex-direction: row-reverse; } .timeline-event:nth-child(even) .timeline-card { flex-direction: row; } .timeline-event:nth-child(odd) .timeline-card-content { text-align: right; } .timeline-event:nth-child(even) .timeline-card-content { text-align: left; } .timeline-event:nth-child(odd) .timeline-year { margin-left: auto; margin-right: 0; } .timeline-event:nth-child(even) .timeline-year { margin-right: auto; margin-left: 0; } /* Trailer Section */ .trailer-section { background: linear-gradient(180deg, var(--volcanic-black) 0%, var(--obsidian-night) 50%, var(--volcanic-black) 100%); position: relative; overflow: hidden; } .trailer-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(229, 198, 134, 0.03) 0%, transparent 50%); pointer-events: none; } .trailer-container { max-width: 1000px; margin: 0 auto; opacity: 0; transform: translateY(50px); } .trailer-container.in-view { animation: trailerReveal 1s var(--ease-cinematic) forwards; } @keyframes trailerReveal { to { opacity: 1; transform: translateY(0); } } .trailer-frame { position: relative; background: var(--storm-cloud); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-cinematic); border: 2px solid rgba(229, 198, 134, 0.1); } .play-button-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12; background: rgba(229, 198, 134, 0.9); color: var(--obsidian-night); padding: 15px 30px; border-radius: 50px; font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.2rem; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s var(--ease-cinematic); border: 2px solid var(--viking-gold); box-shadow: 0 0 30px rgba(229, 198, 134, 0.5); } .play-button-overlay:hover { background: var(--fog-white); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 50px rgba(229, 198, 134, 0.8); } .play-button-overlay.hidden { display: none; } .film-strip { position: absolute; left: 0; right: 0; height: 40px; background: repeating-linear-gradient( 90deg, var(--obsidian-night) 0px, var(--obsidian-night) 20px, rgba(229, 198, 134, 0.1) 20px, rgba(229, 198, 134, 0.1) 40px ); z-index: 10; display: flex; align-items: center; justify-content: center; } .film-strip::before, .film-strip::after { content: ''; position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 10px, rgba(0,0,0,0.3) 10px, rgba(0,0,0,0.3) 12px, transparent 12px, transparent 20px ); } .film-strip-top { top: 0; } .film-strip-bottom { bottom: 0; } .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; background: var(--obsidian-night); } .video-wrapper iframe { position: absolute; top: 40px; left: 0; width: 100%; height: calc(100% - 80px); border: none; } .trailer-caption { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 11; background: rgba(10, 8, 6, 0.8); backdrop-filter: blur(10px); padding: 8px 25px; border-radius: 25px; border: 1px solid rgba(229, 198, 134, 0.2); pointer-events: none; } .trailer-caption p { margin: 0; font-family: 'Source Serif 4', serif; font-style: italic; color: var(--viking-gold); font-size: 1rem; letter-spacing: 0.05em; } /* Reviews Section - Testimonial Cards */ .reviews-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .review-card { background: linear-gradient(135deg, rgba(33, 36, 32, 0.9) 0%, rgba(42, 40, 37, 0.9) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(229, 198, 134, 0.15); border-radius: 8px; padding: 2.5rem; position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: all 0.5s var(--ease-cinematic); } .review-card.in-view { animation: reviewReveal 0.8s var(--ease-cinematic) forwards; } .review-card:nth-child(1) { animation-delay: 0s; } .review-card:nth-child(2) { animation-delay: 0.1s; } .review-card:nth-child(3) { animation-delay: 0.2s; } .review-card:nth-child(4) { animation-delay: 0.3s; } .review-card:nth-child(5) { animation-delay: 0.4s; } .review-card:nth-child(6) { animation-delay: 0.5s; } .review-card:nth-child(7) { animation-delay: 0.6s; } .review-card:nth-child(8) { animation-delay: 0.7s; } .review-card:nth-child(9) { animation-delay: 0.8s; } .review-card:nth-child(10) { animation-delay: 0.9s; } @keyframes reviewReveal { to { opacity: 1; transform: translateY(0); } } .review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-cinematic); border-color: rgba(229, 198, 134, 0.3); } .review-quote { font-family: 'Source Serif 4', serif; font-size: 1.2rem; font-style: italic; line-height: 1.7; color: var(--fog-white); margin-bottom: 1.5rem; position: relative; padding-left: 2.5rem; min-height: 60px; } .review-quote::before { content: '"'; position: absolute; left: 0; top: -10px; font-size: 50px; font-family: 'Cinzel Decorative', serif; color: var(--viking-gold); opacity: 0.3; } .review-author { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--viking-gold); text-align: right; letter-spacing: 0.1em; } /* European Film Academy Section */ .efa-container { max-width: 1200px; margin: 0 auto; } .efa-content { display: flex; align-items: center; gap: 4rem; margin-bottom: 4rem; opacity: 0; transform: translateY(50px); } .efa-content.in-view { animation: efaReveal 1s var(--ease-cinematic) forwards; } @keyframes efaReveal { to { opacity: 1; transform: translateY(0); } } .efa-badge { flex-shrink: 0; animation: badgeRotate 20s linear infinite; } @keyframes badgeRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .efa-badge svg { filter: drop-shadow(0 0 30px rgba(229, 198, 134, 0.3)); } .efa-text { flex: 1; } .efa-intro { font-size: 1.3rem; line-height: 1.8; color: var(--fog-white); margin-bottom: 3rem; font-family: 'Source Serif 4', serif; } .efa-achievements { display: grid; gap: 2rem; } .achievement-card { background: linear-gradient(135deg, rgba(42, 40, 37, 0.6) 0%, rgba(33, 36, 32, 0.6) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(229, 198, 134, 0.1); border-radius: 8px; padding: 2rem; position: relative; overflow: hidden; opacity: 0; transform: translateX(-30px); transition: all 0.5s var(--ease-cinematic); } .achievement-card.in-view { animation: achievementSlide 0.8s var(--ease-cinematic) forwards; } .achievement-card:nth-child(2) { animation-delay: 0.2s; } .achievement-card:nth-child(3) { animation-delay: 0.4s; } @keyframes achievementSlide { to { opacity: 1; transform: translateX(0); } } .achievement-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--viking-gold), var(--warm-rust)); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease-cinematic); } .achievement-card:hover::before { transform: scaleY(1); } .achievement-card:hover { transform: translateX(10px); border-color: rgba(229, 198, 134, 0.3); } .achievement-card h3 { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--viking-gold); margin-bottom: 1rem; letter-spacing: 0.05em; } .achievement-card p { font-size: 1.05rem; line-height: 1.7; color: rgba(237, 226, 199, 0.9); } .achievement-card em { color: var(--pale-gold); font-style: italic; } /* Contact Section */ .contact-content { max-width: 600px; margin: 0 auto; text-align: center; background: linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(229, 198, 134, 0.2); border-radius: 8px; padding: 3rem; box-shadow: var(--shadow-deep); } .contact-email { font-family: 'Cinzel', serif; font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--viking-gold); margin: 2rem 0; letter-spacing: 0.05em; transition: all 0.3s var(--ease-cinematic); cursor: pointer; word-break: break-all; padding: 10px; border-radius: 4px; border: 1px solid rgba(229, 198, 134, 0.2); } .contact-email:hover { color: var(--fog-white); text-shadow: 0 0 20px rgba(229, 198, 134, 0.8); transform: scale(1.05); border-color: rgba(229, 198, 134, 0.4); } /* Trilogy Info Section */ .trilogy-info { opacity: 0; transform: translateY(50px); } .trilogy-info.in-view { animation: trilogyReveal 1.2s var(--ease-cinematic) forwards; } @keyframes trilogyReveal { to { opacity: 1; transform: translateY(0); } } /* Script Section */ .script-section { background: var(--volcanic-black); padding: 4rem 2rem; } .script-container { max-width: 1000px; margin: 0 auto; background: rgba(10, 8, 6, 0.8); border: 1px solid rgba(229, 198, 134, 0.2); border-radius: 8px; padding: 3rem; font-family: 'Inter', sans-serif; color: var(--fog-white); font-size: 1.1rem; line-height: 1.8; overflow-x: auto; position: relative; overflow: hidden; } .script-container h3 { font-family: 'Cinzel Decorative', serif; color: var(--viking-gold); text-align: center; margin-bottom: 2rem; font-size: 1.8rem; } /* Tour Section */ .tour-section { background: linear-gradient(135deg, rgba(42, 40, 37, 0.9) 0%, rgba(33, 36, 32, 0.9) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(229, 198, 134, 0.2); border-radius: 8px; padding: 3rem; margin: 4rem auto; max-width: 800px; box-shadow: var(--shadow-deep); text-align: center; } .tour-section h3 { font-family: 'Cinzel Decorative', serif; color: var(--viking-gold); margin-bottom: 2rem; font-size: 2rem; } .tour-info { color: var(--fog-white); font-size: 1.1rem; line-height: 1.8; margin-bottom: 2rem; } .tour-price { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--viking-gold); margin: 1.5rem 0; font-weight: 600; } .tour-location { font-style: italic; color: rgba(237, 226, 199, 0.8); margin-top: 1.5rem; } /* Family Section */ .family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; max-width: 1000px; margin: 0 auto; } .family-member { text-align: center; opacity: 0; transform: translateY(30px) scale(0.9); } .family-member.in-view { animation: familyReveal 0.8s var(--ease-cinematic) forwards; } @keyframes familyReveal { to { opacity: 1; transform: translateY(0) scale(1); } } .family-portrait { position: relative; width: 180px; height: 180px; margin: 0 auto 1.5rem; border-radius: 50%; overflow: hidden; background: var(--storm-cloud); box-shadow: 0 0 0 4px var(--viking-gold), 0 0 0 8px var(--volcanic-black), var(--shadow-deep); transition: all 0.5s var(--ease-cinematic); cursor: pointer; transform: translateY(-20px); } .family-portrait::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent, var(--viking-gold), transparent); animation: portraitSpin 3s linear infinite; opacity: 0; transition: opacity 0.5s; } .family-portrait:hover::before { opacity: 0.5; } @keyframes portraitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .family-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s var(--ease-cinematic); filter: brightness(1.1) contrast(1.1); } .family-portrait:hover img { transform: scale(1.1); filter: brightness(1.2) contrast(1.2); } .family-name { font-family: 'Cinzel Decorative', serif; font-size: 1.2rem; color: var(--fog-white); margin-bottom: 0.5rem; letter-spacing: 0.1em; } .family-full-name { font-family: 'Source Serif 4', serif; font-size: 1rem; color: rgba(237, 226, 199, 0.7); font-style: italic; } /* Footer */ .footer { padding: 3rem 0 8rem; text-align: center; color: rgba(237, 226, 199, 0.5); font-size: 0.9rem; letter-spacing: 0.1em; } /* Responsive Adjustments */ @media (max-width: 768px) { .navbar { height: 60px; } .navbar ul { gap: 8px; padding: 0 8px; flex-wrap: wrap; justify-content: center; } .navbar a { font-size: 0.65rem; padding: 4px 8px; white-space: nowrap; } .main-title { font-size: clamp(2rem, 12vw, 4rem); } .hero-quote { display: none; } .contact-email { font-size: 1.1rem; word-break: break-word; padding: 15px; } .news-menu { flex-direction: column; align-items: center; gap: 1rem; } .news-grid { grid-template-columns: 1fr; } .golden-beetle { padding: 2rem; } .golden-beetle img { max-width: 150px; } /* Gallery mobile improvements */ .gallery { grid-template-columns: 1fr; gap: 20px; } .see-more-btn { padding: 12px 30px; font-size: 1rem; margin: 2rem auto; } .lightbox-content { max-width: 95vw; max-height: 85vh; margin: 0 10px; } .lightbox-content img { max-width: 95vw; max-height: 80vh; } .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; } .lightbox-close::before, .lightbox-close::after { width: 16px; } .timeline-line { left: 30px; } .timeline-event { flex-direction: row !important; text-align: left !important; margin-left: 0; padding-left: 60px; gap: 20px; justify-content: flex-start; } .timeline-dot { position: absolute; left: 30px; } .timeline-content { flex: 1; } .timeline-card { flex-direction: column !important; } .timeline-card-content { text-align: left !important; } .timeline-year { margin-left: 0 !important; margin-right: auto !important; } .timeline-film-image { width: 100%; height: 200px; } .family-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } /* EFA section mobile */ .efa-content { flex-direction: column; gap: 2rem; text-align: center; } .efa-badge { margin: 0 auto; } .achievement-card { transform: translateX(0) !important; } /* Reviews mobile */ .reviews-container { grid-template-columns: 1fr; } .review-card { transform: translateY(30px) !important; } /* Trailer mobile */ .trailer-caption { top: 50px; padding: 6px 15px; font-size: 0.8rem; } .play-button-overlay { padding: 10px 20px; font-size: 1rem; } .film-strip { height: 30px; } .video-wrapper iframe { top: 30px; height: calc(100% - 60px); } .script-container { padding: 2rem; font-size: 0.8rem; } .tour-section, .famous-residents { padding: 2rem; margin: 2rem auto; } /* Other Films section mobile */ .achievement-card { margin-bottom: 1.5rem; } /* Disable performance-intensive effects on mobile */ .particle-field { display: none; } .cursor-glow { display: none; } .film-grain-global { display: none; opacity: 0.2; } .hero-bg, .hero-fog-1, .hero-fog-2, .scroll-indicator { animation: none !important; } html { cursor: auto; } [style*="backdrop-filter"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .trilogy-info { padding: 2rem !important; margin: 3rem auto !important; } .trilogy-info h3 { font-size: 1.5rem !important; } .trilogy-info > div > div[style*="grid"] { grid-template-columns: 1fr !important; gap: 1rem !important; } } @media (max-width: 480px) { .navbar a { font-size: 0.6rem; padding: 3px 6px; } .contact-email { font-size: 1rem; } .family-grid { grid-template-columns: 1fr; } .see-more-btn { padding: 10px 25px; font-size: 0.9rem; } .gallery-item::after { font-size: 0.8rem; bottom: 15px; left: 15px; } .news-menu-item { font-size: 0.9rem; padding: 8px 15px; } .trilogy-info { padding: 1.5rem !important; margin: 2rem auto !important; } .trilogy-info h3 { font-size: 1.3rem !important; } } /* Loading states */ .fade-in { opacity: 0; transition: opacity 1s var(--ease-cinematic); } .fade-in.loaded { opacity: 1; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Focus styles */ *:focus { outline: 2px solid var(--viking-gold); outline-offset: 2px; } /* Selection */ ::selection { background: var(--viking-gold); color: var(--obsidian-night); } /* General hidden class */ .hidden { display: none !important; } /* Footer */ .footer { padding: 3rem 0 8rem; text-align: center; color: rgba(237, 226, 199, 0.5); font-size: 0.9rem; letter-spacing: 0.1em; } /* Bottom Navigation - Complete Responsive Solution */ #site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: linear-gradient(to top, rgba(10, 8, 6, 0.98) 0%, rgba(21, 20, 16, 0.95) 50%, rgba(28, 25, 21, 0.9) 100%); backdrop-filter: blur(20px) saturate(130%); border-top: 1px solid rgba(229, 198, 134, 0.1); box-shadow: 0 -10px 40px rgba(0,0,0,0.5); padding-bottom: env(safe-area-inset-bottom); animation: navSlideUp 0.8s var(--ease-cinematic) forwards; transform: translateY(0); } @keyframes navSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } #site-footer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(229, 198, 134, 0.05) 50%, transparent 100%); animation: navShimmer 8s ease-in-out infinite; } #bottom-nav { padding: 0; margin: 0; } /* Base navigation styles */ #bottom-nav ul { display: flex; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 10px 20px; gap: 20px; flex-wrap: wrap; min-height: 50px; } #bottom-nav li { flex: 0 0 auto; } #bottom-nav a { position: relative; font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--viking-gold); text-decoration: none; letter-spacing: 0.05em; padding: 8px 15px; transition: all 0.5s var(--ease-cinematic); cursor: pointer; white-space: nowrap; text-align: center; border-radius: 4px; display: inline-block; min-height: 36px; line-height: 20px; } #bottom-nav a::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(229, 198, 134, 0.1) 0%, transparent 70%); opacity: 0; transform: scale(0.8); transition: all 0.5s var(--ease-cinematic); border-radius: 4px; } #bottom-nav a::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, var(--viking-gold), var(--warm-rust)); transform: translateX(-50%); transition: width 0.5s var(--ease-cinematic); border-radius: 1px; } #bottom-nav a:hover::before, #bottom-nav a:focus::before { opacity: 1; transform: scale(1.1); } #bottom-nav a:hover::after, #bottom-nav a:focus::after { width: 80%; } #bottom-nav a:hover, #bottom-nav a:focus { color: var(--fog-white); text-shadow: 0 0 15px rgba(229, 198, 134, 0.8); transform: translateY(-2px) scale(1.05); outline: none; } /* Tablet screens */ @media (max-width: 1024px) { #bottom-nav ul { padding: 8px 15px; gap: 15px; } #bottom-nav a { font-size: 0.85rem; padding: 7px 12px; } } /* Mobile screens */ @media (max-width: 768px) { #bottom-nav ul { padding: 6px 10px; gap: 10px; min-height: auto; } #bottom-nav a { font-size: 0.75rem; padding: 6px 10px; min-height: 32px; } } /* Small mobile screens */ @media (max-width: 480px) { #bottom-nav ul { padding: 5px 5px; gap: 5px; } #bottom-nav a { font-size: 0.7rem; padding: 5px 8px; letter-spacing: 0.03em; } #site-footer { padding-bottom: max(env(safe-area-inset-bottom), 5px); } } /* Very small screens */ @media (max-width: 375px) { #bottom-nav ul { padding: 4px 4px; gap: 4px; } #bottom-nav a { font-size: 0.65rem; padding: 4px 6px; } } /* iPhone 13 Pro Max specific (428x926) */ @media (min-width: 428px) and (max-width: 428px) and (min-height: 926px) and (max-height: 926px) { #bottom-nav ul { padding: 8px 20px; gap: 2px; min-height: 48px; max-height: 64px; justify-content: center; align-items: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; width: 100%; margin: 0 auto; display: flex; } #bottom-nav ul::-webkit-scrollbar { display: none; } #bottom-nav li { flex: 1 1 auto; text-align: center; min-width: 0; display: flex; justify-content: center; } #bottom-nav a { font-size: 0.72rem; padding: 6px 8px; letter-spacing: 0.02em; min-height: 36px; line-height: 24px; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; white-space: nowrap; } #site-footer { padding-bottom: max(env(safe-area-inset-bottom), 20px); background: linear-gradient(to top, rgba(10, 8, 6, 0.99) 0%, rgba(21, 20, 16, 0.97) 50%, rgba(28, 25, 21, 0.95) 100%); } } /* iPhone 14 Pro Max specific (390x844 logical, 430x932 actual) */ @media (min-width: 390px) and (max-width: 430px) and (min-height: 844px) and (max-height: 932px) { #bottom-nav ul { padding: 6px 12px; gap: 0; min-height: 44px; max-height: 60px; justify-content: space-evenly; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #bottom-nav ul::-webkit-scrollbar { display: none; } #bottom-nav li { flex: 1 1 auto; text-align: center; } #bottom-nav a { font-size: 0.62rem; padding: 5px 3px; letter-spacing: 0.01em; min-height: 32px; line-height: 22px; text-transform: uppercase; font-weight: 500; display: block; text-align: center; width: 100%; } #site-footer { padding-bottom: max(env(safe-area-inset-bottom), 20px); background: linear-gradient(to top, rgba(10, 8, 6, 0.99) 0%, rgba(21, 20, 16, 0.97) 50%, rgba(28, 25, 21, 0.95) 100%); } } /* Landscape mode */ @media (max-height: 600px) and (orientation: landscape) { #bottom-nav ul { min-height: 40px; padding: 4px 10px; } #bottom-nav a { font-size: 0.7rem; padding: 4px 8px; min-height: 28px; } }