/* ================================================================
   MATTHEW VOLLMER — TWO-ACT LANDING IDENTITY
   MV / Carbon -> Dr. V / Gallery White -> Main site
   ================================================================ */

:root { --carbon:#111111; --gallery:#F7F7F4; --signal:#FF3B30; --steel:#A8AAAD; --dark-red:#751D2C; --gutter:clamp(22px,3.2vw,56px); --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; }
body { overflow:hidden; background:var(--carbon); color:var(--gallery); font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button { font:inherit; }

.landing { position:relative; width:100%; min-height:100svh; overflow:hidden; isolation:isolate; }
.canvas { position:absolute; inset:0; z-index:-4; pointer-events:none; }
.canvas-mv { background:var(--carbon); }
.canvas-drv { background:var(--gallery); transform:scaleX(0); transform-origin:left center; transition:transform 1.15s var(--ease); }
body.is-drv .canvas-drv { transform:scaleX(1); }

.landing-grid { position:absolute; inset:0; z-index:-2; pointer-events:none; background-size:calc((100vw - (2 * var(--gutter))) / 12) 100%, 100% 25%; background-position:var(--gutter) 0, 0 0; transition:opacity .7s ease .18s; }
.grid-dark { opacity:.14; background-image:linear-gradient(to right,rgba(247,247,244,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(247,247,244,.08) 1px,transparent 1px); }
.grid-light { opacity:0; background-image:linear-gradient(to right,rgba(17,17,17,.11) 1px,transparent 1px),linear-gradient(to bottom,rgba(17,17,17,.06) 1px,transparent 1px); }
body.is-drv .grid-dark { opacity:0; }
body.is-drv .grid-light { opacity:.17; }

.transition-line { position:absolute; z-index:20; top:0; bottom:0; left:-6px; width:6px; background:var(--signal); transform:translateX(-12px); opacity:0; pointer-events:none; }
body.is-transitioning .transition-line { animation:identity-scan 1.12s var(--ease) both; }
@keyframes identity-scan { 0% { opacity:0; transform:translateX(-12px); } 8% { opacity:1; } 82% { opacity:1; } 100% { opacity:0; transform:translateX(calc(100vw + 18px)); } }

.landing-meta { position:absolute; left:var(--gutter); right:var(--gutter); z-index:10; display:flex; align-items:center; justify-content:space-between; gap:28px; font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; transition:color .75s ease .25s; }
.landing-meta-top { top:28px; padding-top:11px; border-top:1px solid currentColor; }
.landing-meta-bottom { bottom:28px; padding-bottom:10px; border-bottom:1px solid currentColor; }
body.is-drv .landing-meta { color:var(--carbon); }
.meta-drv { position:absolute; left:0; opacity:0; transform:translateY(8px); transition:opacity .45s ease,transform .65s var(--ease); }
.meta-mv { opacity:1; transform:translateY(0); transition:opacity .35s ease,transform .6s var(--ease); }
body.is-drv .meta-mv { opacity:0; transform:translateY(-8px); }
body.is-drv .meta-drv { opacity:1; transform:translateY(0); }

.identity-stage { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; padding:90px var(--gutter) 110px; text-align:center; }
.mark-stage { position:relative; width:clamp(300px,32vw,520px); height:clamp(180px,20vw,320px); margin-bottom:clamp(12px,1.6vw,24px); }
.identity-mark { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; }
.mark-mv { opacity:1; transform:scale(.88); filter:blur(0); transition:opacity .34s ease .12s,transform .8s var(--ease),filter .6s ease; }
.mark-drv { opacity:0; transform:scale(.72) rotate(-5deg); filter:blur(10px); transition:opacity .52s ease .42s,transform .95s var(--ease) .28s,filter .75s ease .32s; }
body.is-drv .mark-mv { opacity:0; transform:scale(1.38) rotate(5deg); filter:blur(12px); }
body.is-drv .mark-drv { opacity:1; transform:scale(.94) rotate(0); filter:blur(0); }

.statement-stage { position:relative; width:min(1200px,92vw); min-height:clamp(76px,8vw,126px); }
.identity-statement { position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; font-size:clamp(44px,6vw,102px); line-height:.94; letter-spacing:-.058em; font-weight:700; white-space:nowrap; }
.identity-statement em { color:var(--signal); font-style:normal; margin-left:.22em; }
.statement-mv { opacity:1; transform:translateY(0); transition:opacity .3s ease .06s,transform .68s var(--ease); }
.statement-drv { color:var(--carbon); opacity:0; transform:translateY(34px); transition:opacity .5s ease .48s,transform .78s var(--ease) .34s; }
body.is-drv .statement-mv { opacity:0; transform:translateY(-34px); }
body.is-drv .statement-drv { opacity:1; transform:translateY(0); }

.discipline-stage { position:relative; width:min(760px,88vw); min-height:24px; margin-top:clamp(20px,2.5vw,34px); }
.discipline { position:absolute; inset:0; margin:0; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.discipline-mv { color:var(--steel); opacity:1; transition:opacity .3s ease; }
.discipline-drv { color:#686C70; opacity:0; transition:opacity .45s ease .46s; }
body.is-drv .discipline-mv { opacity:0; }
body.is-drv .discipline-drv { opacity:1; }

.state-index { display:flex; align-items:baseline; gap:5px; }
.state-index b { color:var(--signal); font-weight:700; }
.state-index i { font-style:normal; opacity:.55; }
.enter-control { position:absolute; left:50%; bottom:0; transform:translateX(-50%); min-width:260px; height:72px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:0 14px 0 26px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; overflow:hidden; isolation:isolate; transition:color .35s ease,border-color .35s ease,transform .35s var(--ease); }

.enter-control::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--signal); transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--ease); }

.enter-control:hover::before, .enter-control:focus-visible::before { transform:scaleX(1); }

.enter-control:hover, .enter-control:focus-visible { color:var(--carbon); border-color:var(--signal); transform:translateX(-50%) translateY(-5px); }

.enter-control:focus-visible { outline:2px solid var(--signal); outline-offset:6px; }

.enter-arrow-box { width:44px; height:44px; display:grid; place-items:center; background:var(--signal); color:var(--carbon); flex:0 0 auto; }

.enter-arrow { display:block; font-size:24px; line-height:1; animation:continue-drift 1.5s ease-in-out infinite; }

body.is-drv .enter-control { color:var(--carbon); }

body.is-drv .enter-arrow { animation:enter-drift 1.5s ease-in-out infinite; }

@keyframes continue-drift { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(5px); } }

@keyframes enter-drift { 0%,100% { transform:translateX(-3px); } 50% { transform:translateX(5px); } }

@media (max-width:760px) {
  .landing-meta-bottom { bottom:28px; height:72px; padding:0; border-bottom:0; }
  .landing-meta-top span:last-child { display:none; }
  .mark-stage { width:min(58vw,260px); height:min(58vw,260px); margin-bottom:8px; }
  .statement-stage { width:92vw; min-height:145px; }
  .identity-statement { white-space:normal; font-size:clamp(42px,12vw,72px); line-height:.95; }
  .discipline-stage { min-height:42px; margin-top:12px; }
  .discipline { line-height:1.7; }
  .landing-meta-bottom { bottom:22px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .mark-mv, .mark-drv, .statement-mv, .statement-drv { filter:none !important; }
}


/* ACCESSIBILITY / PROGRESSIVE ENHANCEMENT ----------------------- */
.landing-skip { position:fixed; z-index:100; top:12px; left:12px; transform:translateY(-180%); padding:10px 14px; background:var(--signal); color:var(--carbon); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
.landing-skip:focus { transform:translateY(0); }
.noscript-enter { position:fixed; z-index:100; inset:auto 24px 24px; margin:0; text-align:center; }
.noscript-enter a { display:inline-block; padding:14px 18px; background:var(--signal); color:var(--carbon); font-weight:800; text-decoration:none; }