/* Blue Hour V0.5 — living motion, photographic hero + layered floating stillness */
.hero-line{display:block;transform-origin:left center;animation:hero-rise 1s cubic-bezier(.18,.75,.2,1) both}
.hero-line:nth-child(1){animation-delay:.10s}.hero-line:nth-child(2){animation-delay:.24s}.hero-line:nth-child(3){animation-delay:.38s}
.hero h1{transform:translate3d(0,var(--hero-type-y,0px),0);opacity:var(--hero-type-opacity,1);transition:opacity .15s linear}
@keyframes hero-rise{from{opacity:0;transform:translate3d(0,45px,0);filter:blur(7px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
.poster.hero-photo-stage{position:relative;isolation:visible;overflow:visible;aspect-ratio:1/1.16;width:100%;max-width:465px;margin-left:auto;display:block;background:none;border:none;box-shadow:none;border-radius:0;perspective:1000px}
.poster.hero-photo-stage::before,.poster.hero-photo-stage::after{display:none}
.portrait-halo{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;filter:blur(50px);animation:living-breathe 6.5s ease-in-out infinite}
.portrait-halo--a{width:92%;left:12%;top:3%;background:#5197ff38}.portrait-halo--b{width:56%;left:-12%;bottom:7%;background:#accfff1f;animation-delay:-3s}
.portrait-card{position:absolute;inset:4% 8% 4% 10%;border-radius:24px;overflow:hidden;background:#0c1930;border:1px solid #a0c7fd72;box-shadow:0 32px 95px #010714a9,0 0 65px #458efa2d;transform-style:preserve-3d;transform:perspective(950px) rotateX(var(--hero-tilt-x,0deg)) rotateY(var(--hero-tilt-y,0deg)) rotateZ(-2deg);will-change:transform;transition:box-shadow .5s ease;animation:portrait-idle 8s ease-in-out infinite}
.portrait-card:hover{box-shadow:0 43px 130px #01050dbd,0 0 100px #4f97ff55}
.portrait-card__photo{position:absolute;inset:0;overflow:hidden;background:linear-gradient(150deg,#668fc2,#0a1b36 60%,#050f24)}
.portrait-card__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 29%;filter:saturate(.82) contrast(1.08) brightness(.91)}
.portrait-card__photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#112f5f2a 0%,transparent 36%,#061323a8 100%),linear-gradient(115deg,#6bb1ff14,transparent 55%);pointer-events:none}
.portrait-card__grain{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 4px,#dbeaff0b 5px);opacity:.32;pointer-events:none}
.portrait-card__glare{position:absolute;inset:-4%;background:radial-gradient(ellipse 48% 36% at var(--hover-x,50%) var(--hover-y,50%),#e0f6ff8f,transparent 65%),linear-gradient(115deg,transparent 38%,#d5edff13 50%,transparent 60%);mix-blend-mode:screen;opacity:var(--glare-amount,.23);pointer-events:none;transition:opacity .35s ease}
.portrait-card__outline{position:absolute;inset:12px;border:1px solid #c6e0ff39;pointer-events:none;border-radius:14px}
.portrait-card__serial{position:absolute;top:24px;left:25px;font:600 10px "Space Grotesk",sans-serif;letter-spacing:.2em;color:#d9ebff;text-shadow:0 2px 8px #030816}
.portrait-card__foot{position:absolute;left:24px;right:24px;bottom:24px;display:flex;justify-content:space-between;gap:15px;align-items:end;font:600 11px "Space Grotesk",sans-serif;letter-spacing:.13em;color:#e8f5ff;text-shadow:0 2px 10px #000}
.portrait-card__foot span:last-child{font-size:9px;color:#bbdaff}
.portrait-side-card{position:absolute;z-index:4;box-shadow:0 19px 65px #000b;will-change:transform}
.portrait-side-card--archive{width:36%;left:-4%;bottom:4%;background:#e2ecfb;border:6px solid #ebf3ff;transform:rotate(-9deg);animation:portrait-archive-float 8.5s ease-in-out infinite;transition:box-shadow .4s}
.portrait-side-card--archive:hover{box-shadow:0 28px 70px #000d}
.portrait-side-card__photo{width:100%;aspect-ratio:1;overflow:hidden;background:#344254}
.portrait-side-card__photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.portrait-side-card__caption{display:flex;flex-direction:column;gap:3px;padding:9px 8px 8px;color:#19263a}
.portrait-side-card__caption span{font:600 8px "Space Grotesk";letter-spacing:.12em}
.portrait-side-card__caption strong{font:700 14px "Space Grotesk";letter-spacing:-.05em}
.portrait-side-card--badge{right:-6%;top:12%;padding:18px 19px;border:1px solid #a0cbff87;border-radius:16px;background:linear-gradient(125deg,#172c4dea,#0a1529e8);backdrop-filter:blur(18px);color:#e9f5ff;transform:rotate(7deg);animation:portrait-badge-float 7.5s ease-in-out infinite;display:flex;flex-direction:column;gap:9px}
.portrait-side-card--badge .mono{font-size:8px;color:#91c5ff}
.portrait-side-card--badge strong{font:600 clamp(16px,2.2vw,27px)/.96 "Space Grotesk";letter-spacing:-.055em}
.portrait-corner-label{position:absolute;right:2%;bottom:-6%;color:#8ca8c9;font-size:9px;letter-spacing:.14em;white-space:nowrap}
/* Smooth float is independent from JS pointer transforms via CSS translate property. */
@keyframes portrait-idle{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes portrait-archive-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:4px -13px;rotate:2deg}}
@keyframes portrait-badge-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:-5px 13px;rotate:-2deg}}
@keyframes living-breathe{0%,100%{opacity:.55;scale:1}50%{opacity:.85;scale:1.12}}
/* Time-based floating for Chapter One when the page is not scrolling. */
.float-reel-card__inner{animation:living-card-float 7s ease-in-out infinite;transform-origin:center}
.float-reel-card--two .float-reel-card__inner{animation-duration:9s;animation-delay:-3s}
.float-reel-card--three .float-reel-card__inner{animation-duration:8.4s;animation-delay:-4.5s}
@keyframes living-card-float{0%,100%{translate:0 0}35%{translate:0 -11px}75%{translate:0 5px}}
.cinema-orbit-one{animation:chapter-orbit-one 28s linear infinite}
.cinema-orbit-two{animation:chapter-orbit-two 36s linear infinite reverse}
.cinema-light-streak-a{animation:light-breathe 5.6s ease-in-out infinite alternate}
.cinema-light-streak-b{animation:light-breathe 7.2s ease-in-out infinite alternate-reverse}
.cinema-spark-a{animation:spark-life 4.8s ease-in-out infinite}
.cinema-spark-b{animation:spark-life 5.8s ease-in-out infinite -2.6s}
.showreel-glow{animation:living-breathe 7s ease-in-out infinite}
.showreel-glyph{transition:filter .5s;filter:drop-shadow(0 0 25px #74b5ff44)}
.showreel-shell:hover .showreel-glyph{filter:drop-shadow(0 0 45px #8dceff8c)}
.showreel-shell:hover{border-color:#cfe8ff;box-shadow:0 55px 135px #000d,0 0 110px #67aaf53f}
.cinema-copy-line{display:block;opacity:var(--chapter-line-opacity,1);transform:translate3d(0,var(--chapter-line-y,0px),0);filter:blur(var(--chapter-line-blur,0px));will-change:transform,opacity,filter}
.cinema-copy-line:nth-child(2){transition-delay:.06s}
.cinema-copy-line:nth-child(3){transition-delay:.12s}
.cinema-deck{opacity:var(--chapter-deck-opacity,1);transform:translate3d(0,var(--chapter-deck-y,0px),0)}
.cinema-footer{opacity:var(--chapter-footer-opacity,1)}
.showreel-message{opacity:var(--chapter-reel-copy-opacity,1)!important}
@keyframes chapter-orbit-one{from{rotate:0deg}to{rotate:360deg}}
@keyframes chapter-orbit-two{from{rotate:0deg}to{rotate:360deg}}
@keyframes light-breathe{from{opacity:.19;filter:blur(1px)}to{opacity:.72;filter:blur(3px)}}
@keyframes spark-life{0%,100%{opacity:.35;scale:.7}50%{opacity:1;scale:1.25}}
@media(max-width:900px){
 .poster.hero-photo-stage{max-width:390px;margin:50px auto 20px}
 .portrait-side-card--badge{right:-4%}
}
@media(max-width:620px){
 .poster.hero-photo-stage{width:min(92vw,390px);aspect-ratio:1/1.16;margin:35px auto 24px}
 .portrait-card{inset:4% 10% 3% 10%}
 .portrait-side-card--badge{top:10%;right:-2%;padding:12px;max-width:43%}
 .portrait-side-card--badge strong{font-size:15px}
 .portrait-side-card--archive{left:-1%;bottom:5%;width:35%;border-width:4px}
 .portrait-card__foot span:last-child{display:none}
 .portrait-corner-label{font-size:7px;bottom:-5%}
 .hero h1{transform:none;opacity:1}
 .cinema-copy-line{filter:none}
}
@media(prefers-reduced-motion:reduce){
 .hero-line,.portrait-card,.portrait-side-card,.portrait-halo,.float-reel-card__inner,.cinema-orbit,.cinema-spark,.cinema-light-streak,.showreel-glow{animation:none!important}
 .portrait-card{transform:rotate(-2deg)!important;translate:0 0!important}
 .cinema-copy-line,.cinema-deck,.cinema-footer,.showreel-message{opacity:1!important;transform:none!important;filter:none!important}
 .hero h1{opacity:1!important;transform:none!important}
}