/* The portrait opens on both the car and the tower, with the same photo filling the wings. */
#hero .hero-content {align-self:center; width:min(94%,980px); text-align:center; margin:0}
#hero .hero-content > p:not(.hero-credit) {margin:16px auto 21px; max-width:44ch; text-wrap:balance}
#hero .actions {justify-content:center}
#hero .hero-credit {text-shadow:0 1px 12px #131609}
#hero .shade {background:linear-gradient(0deg,#030604ce,transparent 28%,transparent 76%,#03060477),radial-gradient(ellipse at 50% 50%,#03060372 0%,#06100938 46%,transparent 74%)}
#hero-title {text-shadow:0 2px 48px #0008}
#hero-picture.tokyo-feature {background:#101b1c}
#hero-picture.tokyo-feature::before {content:"";position:absolute;inset:-5%;background:center 73%/cover url('assets/tokyo-car-photo.webp');filter:blur(17px) brightness(.58);transform:scale(1.06)}
#hero-picture.tokyo-feature #hero-img {position:relative;object-fit:contain;object-position:center;animation:none;mask-image:linear-gradient(90deg,transparent 10%,black 37%,black 63%,transparent 90%)}
#hero-picture.tokyo-feature #hero-loop {transition:opacity 1.4s cubic-bezier(.4,0,.15,1);object-position:center 60%}
.hero-films {display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.hero-tab {padding:8px 13px;font-size:11px;line-height:1.1;white-space:nowrap}
.hero-tab[aria-pressed=true] {--glass-fill:rgb(195 234 110 / 32%);--glass-rim:#e5ff9f;--glass-ink:#eeffcf}
#hero .hero-pager .counter {white-space:nowrap}
.hero-bottom .director {display:grid;gap:4px}
.filters button {display:inline-flex;align-items:center;justify-content:center;gap:7px}
.filters svg,.category-icon svg {width:17px;height:17px;flex:none}
.filters img,.edition-info small img {width:26px;height:17px;object-fit:contain}
.filters .selected img {filter:brightness(0)}
.category-icon svg {color:var(--lime)}
.essentials-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:20px;perspective:1200px}
.edition {position:relative;isolation:isolate;overflow:hidden;min-height:clamp(145px,17vw,230px);padding:clamp(17px,2.4vw,34px);display:flex;gap:12px;align-items:flex-end;justify-content:space-between;text-align:left;border:1px solid #e0ecdb3b;border-radius:20px;background:#20261e;box-shadow:inset 0 1px #eef8da55;transition:border-radius .65s cubic-bezier(.18,1,.28,1),transform .5s ease,border-color .35s}
.edition[hidden] {display:none}
.edition-art,.choice-art {position:absolute;inset:0;z-index:-2;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1);background-size:cover;background-position:center 40%}
.edition:after {content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,#050805c7,#07090643 66%),linear-gradient(0deg,#060806b8,transparent 87%)}
.edition-info {display:grid;gap:7px}
.edition-info small {display:flex;align-items:center;gap:8px;letter-spacing:.09em;font:600 10px/1.4 var(--micro);color:#edf1df}
.edition-info strong {font-size:clamp(27px,3.3vw,60px);line-height:.96;letter-spacing:-.065em}
.edition-views {color:#e4efc1;font-size:12px}
.edition-play {display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #efffc98a;background:#efffc521;backdrop-filter:blur(12px);box-shadow:inset 0 1px 3px #fff5;font-size:13px;flex:none}
.cell-film {border-radius:var(--bend-corner,5px) var(--bend-edge,5px);box-shadow:inset 0 1px 1px #fff9,0 16px 38px #0009}
.cell-frame {border-radius:calc(var(--bend-edge,5px) * .8) calc(var(--bend-corner,5px) * .8)}
.cell-frame.tokyo-cell img {object-position:50% 76%}
.cell-frame.tokyo-cell video {transition:opacity 1.2s ease .85s}
.projection-secondary:empty {display:none}
.conversion {overflow:hidden;position:relative;isolation:isolate;padding-block:clamp(60px,8vw,136px);background:radial-gradient(ellipse at 72% 110%,#31423745,transparent 64%),#121510;border-top:1px solid var(--line)}
.choice-heading {margin-bottom:clamp(24px,3.6vw,56px)}
.choice-heading h2 {font-size:clamp(54px,7.8vw,128px);font-weight:660;letter-spacing:-.085em;line-height:1.02;margin:14px 0 0}
.choice-heading h2 em {font-family:Georgia,serif;font-weight:400;letter-spacing:-.09em}
.choice-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.7vw,28px);perspective:1300px}
.choice-card {color:#f7f8ee;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;gap:25px;min-height:clamp(290px,32vw,490px);padding:clamp(22px,3.1vw,48px);border:1px solid #f2fad344;border-radius:24px;background:#222820;box-shadow:inset 0 1px 1px #f2ffd84d,0 20px 45px #0003;transform:perspective(1200px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg));transition:border-radius .65s,transform .4s cubic-bezier(.16,1,.3,1)}
.choice-film .choice-art {background-image:url('assets/rayan.webp');background-position:50% 32%}
.choice-sound {background:linear-gradient(115deg,#111614 0%,#182222 65%,#0e1719)}
.choice-sound .choice-art {left:28%;background-image:url('assets/sound/filmine-cinematic-sound-effects.webp');background-repeat:no-repeat;background-size:118% auto;background-position:50% 49.5%;mask-image:linear-gradient(90deg,transparent,#000 36%)}
.choice-sound .choice-copy {max-width:57%}
.choice-card:after {content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(0deg,#050805ee 0%,#050805a6 45%,#05080515),radial-gradient(ellipse at var(--spec-x,34%) var(--spec-y,10%),#edffb328,transparent 45%)}
.choice-sound:after {background:linear-gradient(90deg,#080b0be0 0%,#0a0e0da1 35%,transparent 63%),linear-gradient(0deg,#0a0d0d77,transparent 51%)}
.choice-copy {display:grid;gap:12px}
.choice-copy strong {font-size:clamp(32px,4.1vw,70px);letter-spacing:-.073em;line-height:.97}
.choice-copy > span {font-size:clamp(13px,1.1vw,17px);color:#e0e4d8;line-height:1.5;max-width:36ch}
.choice-button {padding:12px 17px;display:inline-flex;align-items:center;gap:19px;font-weight:650;font-size:13px}
.choice-button i {font-size:16px;font-style:normal}
.choice-card:focus-visible .choice-button {outline:2px solid var(--lime)}
.edition:focus-visible,.choice-card:focus-visible {outline-offset:-4px}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .edition:hover,.choice-card:hover {border-radius:30px 14px 30px 14px;border-color:#f0f9cf7d}
  .edition:hover .edition-art,.choice-card:hover .choice-art {transform:scale(1.055)}
}
@media(max-width:900px) {
  .hero-bottom .director {display:none}
  .hero-tab {padding:8px 10px}
}
@media(max-width:680px) {
  #hero .hero-shell {gap:15px}
  #hero .hero-content {width:100%}
  #hero .hero-content>p:not(.hero-credit) {margin:14px auto 18px}
  #hero .hero-bottom {gap:8px}
  .hero-films {justify-content:flex-start;gap:5px}
  .hero-tab {font-size:10px;padding:7px 8px}
  .hero-pager .counter {display:none}
  #hero-picture.tokyo-feature #hero-img {mask-image:none}
  .essentials-pair {gap:8px}
  .edition {min-height:158px;padding:12px;align-items:flex-end;border-radius:13px}
  .edition-info small {font-size:8px;gap:4px}
  .edition-info small img {width:17px;height:13px}
  .edition-info strong {font-size:clamp(21px,4.8vw,30px)}
  .edition-play {position:absolute;right:9px;top:9px;width:25px;height:25px;font-size:9px}
  .choice-list {grid-template-columns:1fr}
  .choice-card {min-height:248px;gap:18px;border-radius:19px}
}
@media(prefers-reduced-motion:reduce) {
  .edition,.choice-card,.choice-art,.edition-art {transition:none;transform:none}
  #hero-picture.tokyo-feature #hero-loop {transition:none}
}

.studio-cut:not([hidden]) {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-5px 0 20px;padding:10px 14px 10px 20px;border:1px solid #454b3b;border-radius:14px;background:linear-gradient(120deg,#303a27,#171b16 70%)}
.studio-cut p {font-size:14px;font-weight:540}
.studio-cut p span {color:var(--lime);margin:0 6px}
.studio-cut button {display:inline-flex;align-items:center;gap:9px;padding:8px 13px;font-size:12px;white-space:nowrap}
@media(min-width:681px) {
  #hero-picture.tokyo-feature {container-type:size}
  #hero-picture.tokyo-feature #hero-img {width:min(100%,75cqh);margin-inline:auto;mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent)}
}

#hero-credit,.projection-client {display:flex;gap:9px;align-items:center}
#hero-credit {justify-content:center}
#hero-credit :is(svg,img),.projection-client :is(svg,img) {width:22px;height:17px;object-fit:contain;flex:none}

.edition[data-reel="DadZGNsN0OJ"] .edition-art {background-position:50% 60%}
.edition[data-reel="cali-essentials-studio"] .edition-art {background-position:50% 54%}
.view-options button.liquid-control[aria-pressed=true] {--glass-fill:rgb(203 239 133 / 80%);--glass-solid:#c4e79e;--glass-rim:#e9ffc7;--glass-ink:#16200e;color:var(--glass-ink)}
#projection-description {font:450 14px/1.5 Geist,Arial,sans-serif;letter-spacing:0;color:#d5dacb}
