/* A finite optical vignette. The teaching workspaces retain their own layouts. */
.atlas-hero{height:650px;min-height:650px;background:#14232f;isolation:isolate}
.atlas-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 72% 35%,#34414977,transparent 62%);pointer-events:none}
.hero-grid{opacity:.06;inset:0 0 0 25%;background-size:58px 58px}
.hero-copy{width:34%;padding-top:93px;padding-bottom:80px}
.hero-copy h1{font-size:clamp(56px,5.2vw,82px);letter-spacing:-3px}
.hero-intro{font-size:14px;max-width:310px;line-height:1.85}
.hero-intro br{display:none}
.hero-actions{gap:17px;flex-wrap:wrap;max-width:300px}
.hero-actions .film-entry{margin-top:0;padding-left:0;font-size:12px}
.hero-assembly{inset:35px 1.4% 95px 30%;display:flex;flex-direction:column;justify-content:center}
#atlas-hero-model{position:relative;min-height:0;flex:1;width:100%;overflow:hidden}
#atlas-hero-model canvas{width:100%;height:100%;display:block;outline:none}
.obscura-fallback{width:100%;height:100%;opacity:.85}
.atlas-hero [hidden]{display:none!important}
.obscura-caption{position:relative;flex:0 0 34px;width:100%;text-align:center;font:italic 26px Georgia,serif;color:#f0d7ad;opacity:0;transform:translateY(5px);transition:opacity .55s,transform .55s;pointer-events:none;min-height:32px;text-shadow:0 2px 12px #14232f}
.obscura-caption.is-visible{opacity:1;transform:none}
.obscura-controls{display:flex;align-items:center;justify-content:center;gap:12px;min-height:65px;position:relative;z-index:2;padding:0 15px}
.obscura-controls button{font:inherit;font-size:12px;cursor:pointer;transition:background .2s,color .2s;border-radius:2px}
.obscura-controls button:focus-visible{outline:2px solid #f0c786;outline-offset:4px}
.obscura-start{min-width:195px;min-height:44px;padding:11px 20px;border:1px solid #c8a46b;background:#dfbf87;color:#222a2f;font-weight:650!important;letter-spacing:.1px}
.obscura-start:hover:not(:disabled){background:#eed5a7}
.obscura-start:disabled{cursor:default;background:#283742;color:#d0b783;border-color:#667078}
.obscura-reset,.obscura-sound{background:transparent;border:1px solid #6e7a8055;color:#b6c6d1;min-height:38px;padding:8px 12px}
.obscura-reset{font-size:20px!important;line-height:1;min-width:38px;padding:6px}
.obscura-reset:disabled{opacity:.25;cursor:default}
.obscura-reset:hover:not(:disabled),.obscura-sound:hover{background:#ffffff0a;color:#fff}
.obscura-sound[aria-pressed=true]{color:#edc78e;border-color:#ad8c5a88}
.obscura-scene-title{position:absolute;left:14%;top:5px;font-size:10px;letter-spacing:1.6px;color:#b5c4cf;font-weight:500;pointer-events:none}
.hero-footline{height:70px}
.atlas-films{max-width:1636px;margin:auto;padding:10px 48px 65px}
.films-heading{display:flex;align-items:baseline;gap:22px;margin:0 0 24px}
.films-heading h2{font-size:27px;letter-spacing:-.4px;margin:0;font-weight:700}
.films-heading p{font-size:13px;color:#556471;margin:0;line-height:1.7}
.film-card{display:grid;grid-template-columns:1fr 1fr;background:#152733;color:#fff;border:1px solid #263c4c;overflow:hidden;transition:box-shadow .2s}
.film-card:hover{box-shadow:0 12px 30px #14232f1a}
.film-poster{position:relative;background:#11232f;min-width:0;aspect-ratio:16/9;overflow:hidden}
.film-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.film-card:hover img{transform:scale(1.025)}
.film-play{position:absolute;inset:0;display:grid;place-items:center}
.film-play span{width:58px;height:58px;display:grid;place-items:center;border:1px solid #ebdcc0bb;border-radius:50%;background:#16273099;backdrop-filter:blur(8px);font-size:22px;color:#f6e4bf;padding-left:3px;transition:background .2s}
.film-card:hover .film-play span{background:#c1a16d;color:#14232f}
.film-card-copy{padding:clamp(25px,4vw,60px);display:flex;flex-direction:column;justify-content:center}
.film-card-copy .atlas-overline{font-size:9px;color:#c4ae89;letter-spacing:1.7px;margin:0 0 17px}
.film-card h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-1px;font-weight:500;margin:0 0 16px}
.film-card p{color:#bdccd5;line-height:1.8;font-size:15px;max-width:440px;margin:0 0 25px}
.film-card-foot{display:flex;align-items:center;gap:22px;color:#d8bc8c;font-size:12px}
.film-card-foot small{font-size:11px;color:#9eafbb;border-left:1px solid #52616b;padding-left:22px}
@media(min-width:1650px){.hero-copy{width:32%;padding-top:110px}.hero-assembly{left:31%;right:2%;top:18px;bottom:88px}.atlas-hero{height:min(730px,calc(100svh - 76px));min-height:620px}.hero-intro{font-size:15px}.obscura-caption{font-size:28px}}
@media(max-width:1150px) and (min-width:761px){.atlas-hero{height:610px;min-height:610px}.hero-copy{padding-top:87px;width:34%}.hero-copy h1{font-size:60px}.hero-intro{font-size:13px;max-width:260px}.hero-assembly{left:30%;right:0;top:35px;bottom:92px}.obscura-caption{font-size:22px}.obscura-scene-title{left:18%;top:20px}.atlas-films{padding-inline:32px}}
@media(max-width:760px){.atlas-hero{height:auto;min-height:0;overflow:hidden;padding-bottom:61px}.hero-copy{width:auto;padding:38px 24px 0;max-width:520px}.hero-copy h1{font-size:57px;letter-spacing:-2.7px;line-height:1.05}.hero-copy h1 br{display:none}.hero-copy h1 em::before{content:' '}.hero-intro{font-size:13px;max-width:360px}.hero-copy .atlas-overline{margin-bottom:17px}.hero-actions{max-width:none;margin-top:20px;gap:24px}.hero-actions .hero-start{margin-top:0}.hero-actions .film-entry{font-size:12px}.hero-assembly{position:relative;inset:auto;margin:15px -3% 0;width:106%;height:400px}.obscura-scene-title{left:10%;top:14px;font-size:8px;letter-spacing:1.5px}.obscura-caption{font-size:21px}.obscura-controls{padding:0 18px;min-height:65px;gap:9px}.obscura-start{min-width:179px;font-size:12px;min-height:43px}.obscura-sound{font-size:11px!important;padding-inline:8px}.hero-grid{inset:260px 0 0}.hero-footline{height:51px}.atlas-films{padding:0 22px 38px}.films-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:20px}.films-heading h2{font-size:23px}.films-heading p{font-size:12px}.film-card{grid-template-columns:1fr}.film-card-copy{padding:26px}.film-card h3{font-size:29px}.film-card p{font-size:14px;margin-bottom:20px}.film-card-copy .atlas-overline{font-size:8px;margin-bottom:13px}.film-play span{width:52px;height:52px}.atlas-spaces{padding-top:30px}}
@media(max-width:390px){.hero-copy{padding-inline:19px}.hero-copy h1{font-size:51px}.hero-assembly{height:365px}.obscura-controls{gap:7px;padding-inline:10px}.obscura-start{min-width:166px;padding-inline:12px}.atlas-films{padding-inline:16px}.film-card-copy{padding:23px}}
@media(prefers-reduced-motion:reduce){.obscura-caption,.obscura-controls button,.film-card,.film-poster img,.film-play span{transition:none}.film-card:hover img{transform:none}}

.hero-assembly .obscura-controls{position:static;inset:auto;flex-shrink:0;width:100%;pointer-events:auto;justify-content:center;gap:12px}.hero-assembly{margin:0}
@media(max-width:760px){.hero-assembly{margin:15px -3% 0}.hero-assembly .obscura-controls{gap:9px}}

/* Inspect the observer angle without rotating the optical experiment. */
#atlas-hero-model canvas{touch-action:none;cursor:grab}
#atlas-hero-model.is-view-dragging canvas{cursor:grabbing}
.atlas-hero[data-obscura="playing"] #atlas-hero-model canvas{cursor:default}
.obscura-view-hint{position:absolute;top:15px;right:24px;color:#9eb4c3;font-size:10px;line-height:1.5;pointer-events:none}
.obscura-view-keys{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){.obscura-view-hint{top:13px;right:30px;font-size:9px}}

/* A compact first screen keeps the optical action reachable on phones. */
.obscura-view-toggle{position:absolute;top:0;right:24px;z-index:3;min-height:40px;padding:8px 10px;border:1px solid #6e7a8055;border-radius:2px;background:#14232fdd;color:#c4d5df;font:inherit;font-size:10px;cursor:pointer}
.obscura-view-toggle[aria-pressed=true]{color:#edc78e;border-color:#ad8c5a88}
.obscura-view-toggle:focus-visible{outline:2px solid #f0c786;outline-offset:3px}
@media(max-width:760px){.hero-copy{padding-top:20px}.hero-actions{margin-top:16px}.hero-assembly{margin-top:8px;height:clamp(250px,calc(100svh - 380px),360px)}.obscura-view-toggle{right:30px}.obscura-scene-title{top:14px}}
@media(max-width:760px),(pointer:coarse){#atlas-hero-model canvas{touch-action:pan-y pinch-zoom;cursor:auto}#atlas-hero-model.is-view-enabled canvas{touch-action:none;cursor:grab}.obscura-view-hint{display:none}}

/* Scene tools occupy a row on phones, so their labels cannot cover the optics. */
.obscura-scene-tools{display:contents}
@media(max-width:760px){.obscura-scene-tools{display:flex;flex:0 0 42px;align-items:center;justify-content:space-between;gap:12px;margin:0 30px}.obscura-scene-tools .obscura-scene-title,.obscura-scene-tools .obscura-view-toggle{position:static;flex-shrink:0}.obscura-view-toggle{background:transparent;min-width:100px;text-align:center}.hero-assembly{height:clamp(250px,calc(100svh - 338px),402px)}}