:root{
  color-scheme:dark;
  --ink:#fff;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
body{margin:0;background:#101713;color:var(--ink);font-family:Arial,Helvetica,sans-serif}

.gateway{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.backdrop,.scene,.photo,.shade{position:absolute;inset:0;pointer-events:none}
.backdrop,.photo{background:url('./hero.jpg') center/cover no-repeat}
.backdrop{filter:brightness(.9) saturate(.94)}

.scene-home{mask-image:linear-gradient(var(--split-angle,122deg),#000 43%,transparent 57%);-webkit-mask-image:linear-gradient(var(--split-angle,122deg),#000 43%,transparent 57%)}
.scene-auto{mask-image:linear-gradient(var(--split-angle,122deg),transparent 43%,#000 57%);-webkit-mask-image:linear-gradient(var(--split-angle,122deg),transparent 43%,#000 57%)}
.gateway[data-active=none] .scene{opacity:0;transition:opacity 1.2s ease}
.gateway[data-active=home] .scene,.gateway[data-active=auto] .scene{opacity:1;transition:opacity .75s ease}

.photo{transform:scale(1);filter:brightness(.9) saturate(.94);transition:transform 1.8s var(--ease),filter 1.15s cubic-bezier(.2,.65,.3,1);will-change:transform}
.scene-home .photo{transform-origin:25% 55%}
.scene-auto .photo{transform-origin:78% 58%}

.shade{background:linear-gradient(180deg,#03080655,transparent 40%,#03080612 55%,#03080699)}

.brand{position:absolute;z-index:5;left:50%;top:48%;transform:translate(-50%,-50%);margin:0;text-align:center;font-weight:500;pointer-events:none;text-shadow:0 4px 38px #000a}
.brand span{display:block}
.brand span:first-child{font-weight:800;letter-spacing:.08em;margin-right:-.08em;line-height:1;font-size:clamp(62px,6.5vw,108px)}
.brand span:last-child{font-weight:500;letter-spacing:.65em;margin:.65em -.65em 0 0;font-size:clamp(13px,1.2vw,19px)}

.choice{position:absolute;inset:0;text-decoration:none;color:inherit;z-index:3;-webkit-tap-highlight-color:transparent}
.choice-home{clip-path:polygon(0 0,70% 0,30% 100%,0 100%)}
.choice-auto{clip-path:polygon(70% 0,100% 0,100% 100%,30% 100%)}

.label{position:absolute;text-align:center;padding:12px 6px;transform-origin:center center;text-shadow:0 3px 24px #0009;transition:transform 1.3s var(--ease),opacity 1s ease}

@media(min-width:701px){
  .label{top:70%;width:42%}
  .choice-home .label{left:3%;width:46%;top:18%}
  .choice-auto .label{right:2%;width:48%;top:70%}
}

.label h2{font-family:Arial,Helvetica,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.055em;font-size:clamp(30px,3.65vw,68px);line-height:1.08;white-space:nowrap;margin:0;transition:letter-spacing .8s var(--ease),transform .9s var(--ease);animation:title-arrive 1.1s var(--ease) both}
.choice-auto .label h2{animation-delay:.15s}

.sector-description{font-size:clamp(14px,1.15vw,18px);font-weight:400;line-height:1.5;letter-spacing:.01em;margin:16px 0 24px;color:#ffffffd9}

.enter{display:inline-flex;align-items:center;gap:16px;border:0;padding:0;font-size:14px;letter-spacing:0;opacity:1;transition:opacity .8s}
.enter>span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff65;border-radius:50%;font-size:20px;transition:transform .9s var(--ease),background .7s,border-color .7s}

.footnote{position:absolute;bottom:22px;left:0;right:0;margin:0;text-align:center;font-size:11px;letter-spacing:.2em;opacity:.8;pointer-events:none;z-index:5}

.choice:focus-visible{outline:none}
.choice:focus-visible .label{outline:1px solid #fff;outline-offset:12px;background:#07110b30;border-radius:2px}

/* Active-sector hover/focus state */
.gateway[data-active=home] .scene-home .photo,.gateway[data-active=auto] .scene-auto .photo{transform:scale(var(--hover-scale,1.05));filter:brightness(1.12) saturate(1.06)}
.gateway[data-active=home] .scene-auto .photo,.gateway[data-active=auto] .scene-home .photo{transform:scale(1);filter:brightness(.48) saturate(.65) blur(3px)}
.gateway[data-active=home] .choice-home .label,.gateway[data-active=auto] .choice-auto .label{transform:translateY(-5px) scale(1.045)}
.gateway[data-active=home] .choice-auto .label,.gateway[data-active=auto] .choice-home .label{transform:translateY(2px) scale(.98);opacity:.72}
.gateway[data-active=home] .choice-home .enter>span,.gateway[data-active=auto] .choice-auto .enter>span{background:#ffffff18;border-color:#ffffffc0;transform:translateX(5px)}

@keyframes title-arrive{from{opacity:0;translate:0 18px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}

@media(max-width:700px){
  .gateway{min-height:650px}
  .backdrop{background:#101713}
  .scene-home{inset:0 0 45%;mask-image:linear-gradient(#000 87%,transparent);-webkit-mask-image:linear-gradient(#000 87%,transparent)}
  .scene-auto{inset:45% 0 0;mask-image:linear-gradient(transparent,#000 15%);-webkit-mask-image:linear-gradient(transparent,#000 15%)}
  .gateway[data-active=none] .scene{opacity:1}
  .photo{transform:none;background-size:auto 115%}
  .scene-home .photo{background-position:3% center;transform-origin:30% 50%}
  .scene-auto .photo{background-position:100% 65%;transform-origin:75% 50%}
  .shade{background:linear-gradient(180deg,#03080630,transparent 15%,#03080640 40%,#03080620 60%,#03080680 100%)}
  .brand{top:50%;background:radial-gradient(ellipse,#101713a0,transparent 70%);padding:20px 50px}
  .brand span:first-child{font-size:58px}
  .brand span:last-child{font-size:13px}
  .choice-home{inset:0 0 50%;clip-path:none}
  .choice-auto{inset:50% 0 0;clip-path:none}
  .label{width:90%;max-width:90%;top:auto}
  .choice-home .label{left:5%;bottom:24%}
  .choice-auto .label{right:5%;bottom:17%}
  .label h2{font-size:clamp(25px,6.7vw,44px);letter-spacing:-.05em}
  .sector-description{font-size:14px;margin:10px 0 17px}
  .enter{font-size:13px}
  .footnote{bottom:14px;font-size:10px;letter-spacing:.12em}
  .choice:focus-visible .label{outline-offset:8px}
  .gateway[data-active=home] .scene-home .photo,.gateway[data-active=auto] .scene-auto .photo{transform:scale(1.025)}
  .gateway[data-active=home] .choice-home .label,.gateway[data-active=auto] .choice-auto .label{transform:translateY(-3px) scale(1.02)}
}

@media(prefers-reduced-motion:reduce){
  .photo,.label,.enter,.enter>span{transition:none!important;transform:none!important}
  .scene{transition:none!important}
  .label h2{animation:none}
}