/* Dealog hero film portal — native CSS, no animation framework. */
.hero-visual.hero-film{display:block;min-height:460px;padding:20px 10px 36px;isolation:isolate}
.hero-film .hero-grid-lines{inset:-40px;opacity:.65}
.film-portal{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.12;max-width:495px;margin:auto}
.film-portal::before{content:"";position:absolute;inset:6% 0;border-radius:50%;background:radial-gradient(ellipse,#a459f64d,transparent 66%);filter:blur(24px);z-index:-1}
.film-orbit{position:absolute;inset:6% -3%;border:1px solid #d8b3ff40;border-radius:50%;transform:rotate(-23deg);pointer-events:none}
.film-orbit::before{content:"";position:absolute;left:17%;top:9%;height:7px;width:7px;border-radius:50%;background:#d8b3ff;box-shadow:0 0 14px #b36dfc}
.film-orbit-secondary{inset:-1% 11%;transform:rotate(30deg);border-color:#d8b3ff1f}
.film-orbit-secondary::before{left:auto;right:10%;top:14%;width:4px;height:4px;background:#a459f6}
.film-frame{position:absolute;inset:8% 4%;border-radius:58% 42% 47% 53% / 43% 53% 47% 57%;overflow:hidden;background:radial-gradient(ellipse at 75% 15%,#bd76fa66,transparent 50%),linear-gradient(140deg,#573273,#24102f 70%);border:1px solid #d7b7ff66;box-shadow:inset 0 1px 0 #e5c9ff66,inset -12px -10px 45px #170824,0 30px 70px #10051f80;transform:rotate(-8deg);transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s}
.film-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e4caff16,transparent 40%,#a459f630);pointer-events:none}
.film-frame::after{content:"";position:absolute;inset:12%;border:1px solid #d4a7ff12;border-radius:50%;pointer-events:none}
.hero-film .brand-sculpture{width:66%;max-width:300px;right:17%;top:20%;opacity:.72;transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0) rotate(8deg);filter:drop-shadow(0 8px 18px #090110) drop-shadow(0 0 24px #a459f666)}
.film-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;cursor:pointer;z-index:2;padding:0;border-radius:50%}
.film-play-disc{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#fff;box-shadow:0 0 0 12px #ffffff0d,0 8px 30px #16082477;transition:transform .35s,box-shadow .35s}
.film-play-disc::before{content:"";display:block;margin-left:5px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid #51276b}
.film-play:hover .film-play-disc{transform:scale(1.1);box-shadow:0 0 0 18px #ffffff0a,0 8px 40px #a459f633}
.film-play:focus-visible{outline:3px solid #e6caff;outline-offset:5px}
.film-label{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px auto 0;color:#dfcee9;font-size:13px;letter-spacing:.015em}
.film-label .film-line{height:1px;width:26px;background:#b994d5}
.film-tag{position:absolute;right:0;bottom:9%;display:flex;align-items:center;gap:8px;padding:9px 14px;background:#40254de8;border:1px solid #cfb0e846;border-radius:100px;box-shadow:0 6px 24px #170a2380;color:#eadff3;font-size:11px;letter-spacing:.05em;pointer-events:none}
.film-tag::before{content:"✓";color:#cb9ef3;font-size:14px}
.hero-film:has(.film-play:hover) .film-frame{transform:rotate(-5deg);border-color:#e6caff99}
.hero-film-dialog{width:min(960px,calc(100% - 40px));max-width:960px;padding:0;border:1px solid #a980c24d;border-radius:24px;background:#21102c;color:#fff;overflow:visible;box-shadow:0 24px 120px #0008}
.hero-film-dialog::backdrop{background:#100918dc;backdrop-filter:blur(9px)}
.film-dialog-close{position:absolute;right:14px;top:14px;z-index:3;border:1px solid #ffffff40;width:40px;height:40px;border-radius:50%;background:#20102de8;color:#fff;font-size:25px;line-height:1;cursor:pointer}
.film-dialog-content{border-radius:23px;overflow:hidden;background:#21102c;min-height:240px;aspect-ratio:16/9;display:grid;place-items:center;position:relative}
.film-dialog-content video{width:100%;height:100%;max-height:80vh;object-fit:contain;background:#100818}
.film-dialog-fallback{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;background:radial-gradient(ellipse at 70% 20%,#a459f640,transparent 55%),#2b1538;text-align:center}
.film-dialog-fallback img{width:160px;margin-bottom:24px}
.film-dialog-fallback p{color:#dbcbe8;max-width:360px;margin:0;font-size:16px}
.film-dialog-content [hidden]{display:none!important}
body.film-modal-open{overflow:hidden}
@media(min-width:641px) and (max-width:1000px){.hero-visual.hero-film{min-height:360px;padding-inline:0}.film-play-disc{width:66px;height:66px}.film-tag{right:-2%;font-size:10px;padding:8px 10px}.film-label{font-size:12px}}
@media(max-width:640px){.hero-visual.hero-film{min-height:0;max-width:370px;padding:0 8px 18px;margin:18px auto 0}.film-portal{max-width:350px;aspect-ratio:1.16}.film-label{font-size:12px;margin-top:10px}.film-tag{right:0;padding:8px 12px;font-size:10px}.film-play-disc{width:64px;height:64px}.hero-film-dialog{width:calc(100% - 24px);border-radius:18px}.film-dialog-content{border-radius:17px;min-height:220px}.film-dialog-close{width:34px;height:34px;right:9px;top:9px}.film-dialog-fallback{padding:38px 25px}.film-dialog-fallback img{width:135px}.film-dialog-fallback p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-film *, .hero-film::before{animation:none!important;transition:none!important}.hero-film:has(.film-play:hover) .film-frame{transform:rotate(-8deg)}}

/* Mobile portal alignment and viewport-safe native video dialog. */
.hero-film-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;min-width:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:hidden}
.film-dialog-content{min-width:0;max-width:100%;min-height:0}
.film-dialog-content video{display:block;min-width:0;max-width:100%;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100dvh - 26px)}
@media(max-width:640px){
 .hero-film .brand-sculpture{height:auto;left:50%;right:auto;top:50%;width:66%;transform:translate(-50%,-50%) rotate(8deg)}
 .hero-film-dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);border-radius:16px}
 .film-dialog-content{width:100%;min-height:0;aspect-ratio:16/9;border-radius:15px}
 .film-dialog-close{width:30px;height:30px;right:7px;top:7px;font-size:22px}
}