/* Avinash D.R.S. - Drive the Portfolio: styles for the overlay UI (the 3D scene is drawn by js/main.js) */

/* Fonts (Fonts/WEB): Array for headings, Khand for everything else. Both come in a single Regular weight, so the
   browser is told not to fake bold or italic versions of them. */
@font-face { font-family:"Array"; font-weight:400; font-style:normal; font-display:swap;
             src:url("../Fonts/WEB/fonts/Array-Regular.woff2") format("woff2"), url("../Fonts/WEB/fonts/Array-Regular.woff") format("woff"),
                 url("../Fonts/WEB/fonts/Array-Regular.ttf") format("truetype"); }
@font-face { font-family:"Khand"; font-weight:400; font-style:normal; font-display:swap;
             src:url("../Fonts/WEB/fonts/Khand-Regular.woff2") format("woff2"), url("../Fonts/WEB/fonts/Khand-Regular.woff") format("woff"),
                 url("../Fonts/WEB/fonts/Khand-Regular.ttf") format("truetype"); }
:root { --ink:#0d0d0d; --cream:#e7e7e3; --accent:#ffb000; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; background:#8c8c88; font-family:"Khand", system-ui, sans-serif; font-synthesis:none; color:var(--ink); }
canvas { display:block; }
.ui { position:fixed; pointer-events:none; z-index:5; }

#brand { top:20px; left:24px; color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.7); }
#brand .logo { font-family:"Array", sans-serif; font-size:28px; letter-spacing:1px; }
#brand .sub { font-size:15px; opacity:.7; margin-top:2px; }

#nav { top:50%; transform:translateY(-50%); max-height:calc(100vh - 200px); overflow-y:auto; left:24px; pointer-events:auto; width:240px; background:rgba(10,10,10,.55); backdrop-filter:blur(6px); color:var(--cream); border-radius:16px; padding:8px;
       box-shadow:0 10px 30px rgba(27,27,47,.15); }
#navToggle { display:none; border:0; background:var(--ink); color:var(--cream); border-radius:999px; padding:8px 14px;
             font:400 15px "Khand", sans-serif; cursor:pointer; }
.nav-group { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; opacity:.5; margin:9px 8px 3px; }
.nav-group:first-child { margin-top:3px; }
.nav-list button { display:flex; align-items:center; gap:8px; width:100%; border:0; background:none; padding:6px 8px; border-radius:9px;
                   font:400 15.5px "Khand", sans-serif; color:var(--cream); cursor:pointer; text-align:left; }
.nav-list button:hover { background:rgba(231,231,227,.1); }
.nav-list .dot { width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
.nav-list .num { font-variant-numeric:tabular-nums; opacity:.45; font-size:14px; }
.nav-list .state { margin-left:auto; font-size:14px; color:var(--cream); opacity:.75; }
.nav-list button.done .state::after { content:"✓"; }
.nav-list button.here { box-shadow:inset 0 0 0 2px var(--c); }

#weather { top:70px; right:24px; pointer-events:auto; display:flex; gap:2px; padding:4px; background:var(--ink); border-radius:999px; }
#weather button { border:0; background:none; color:var(--cream); font:400 14px "Khand", sans-serif; letter-spacing:.5px;
                  padding:6px 13px; border-radius:999px; cursor:pointer; opacity:.7; transition:background .2s, color .2s, opacity .2s; }
#weather button:hover { opacity:1; }
#weather button[aria-pressed="true"] { background:var(--accent); color:var(--ink); opacity:1; }
#accentPick { bottom:24px; left:50%; transform:translateX(-50%); pointer-events:auto; display:flex; gap:8px; padding:7px 10px;
              background:rgba(10,10,10,.55); backdrop-filter:blur(6px); border-radius:999px; }
#accentPick button { width:22px; height:22px; border-radius:50%; border:0; cursor:pointer; background:var(--sw);
                     box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); transition:transform .15s; }
#accentPick button:hover { transform:scale(1.15); }
#accentPick button[aria-checked="true"] { outline:2px solid var(--cream); outline-offset:2px; }
/* background music player */
#music { top:118px; right:24px; width:236px; pointer-events:auto; display:flex; align-items:center; gap:10px; padding:8px 12px 12px 8px;
         background:rgba(10,10,10,.55); backdrop-filter:blur(6px); color:var(--cream); border-radius:14px; overflow:hidden; }
#music button { flex:none; display:grid; place-items:center; border:0; cursor:pointer; color:var(--cream); background:none; }
#music svg { width:18px; height:18px; fill:currentColor; }
#musicToggle { width:34px; height:34px; border-radius:50%; background:var(--accent) !important; color:var(--ink) !important; }
#musicToggle .i-off, #music.off #musicToggle .i-on { display:none; }
#music.off #musicToggle .i-off { display:block; }
#music.off #musicToggle { background:rgba(231,231,227,.14) !important; color:var(--cream) !important; }
#musicNext { width:24px; height:24px; opacity:.7; } #musicNext:hover { opacity:1; }
#musicNext svg { width:14px; height:14px; }
.m-info { flex:1; min-width:0; line-height:1.1; }
.m-title { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-artist { font-size:13px; opacity:.6; margin-top:2px; }
.m-side { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.m-time { font-size:13px; opacity:.75; font-variant-numeric:tabular-nums; white-space:nowrap; }
.m-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(231,231,227,.12); }
.m-bar span { display:block; height:100%; width:0; background:var(--accent); }
#music.off .m-info, #music.off .m-side { opacity:.5; }
#progress { top:22px; right:24px; background:var(--ink); color:var(--cream); padding:10px 16px; border-radius:999px; font-size:16px; }
#progress b { color:var(--accent); }

#speed { bottom:22px; right:24px; color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.7); text-align:right; font-family:"Array", sans-serif; font-size:44px; line-height:1; }
#speed small { display:block; font-family:"Khand", sans-serif; font-size:14px; letter-spacing:2px; opacity:.6; }

#help { bottom:24px; left:24px; max-width:calc(50vw - 130px); font-size:15px; background:rgba(10,10,10,.55); color:var(--cream); backdrop-filter:blur(6px); padding:8px 14px; border-radius:10px; }

/* everything behind an open overlay goes dark */
#dim { inset:0; z-index:7; background:rgba(0,0,0,.68); opacity:0; pointer-events:none; transition:opacity .35s ease; }
#dim.show { opacity:1; pointer-events:auto; cursor:pointer; }
#carousel { pointer-events:auto; z-index:8; left:50%; top:50%; width:min(1180px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow-y:auto; overflow-x:hidden; background:var(--ink); color:var(--cream);
            border-radius:20px; padding:18px 18px 14px; border-top:8px solid var(--accent); box-shadow:0 30px 80px rgba(27,27,47,.45);
            opacity:0; visibility:hidden; transform:translate(-50%, -46%) scale(.96);
            transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.2), visibility 0s .45s; }
#carousel.show { opacity:1; visibility:visible; transform:translate(-50%, -50%); transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.2); }
#carousel:not(.show) { pointer-events:none; }   /* while it fades out, touches and clicks already go through */
.c-head { display:flex; align-items:center; gap:12px; }
.c-head .tag { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.c-head h2 { font-family:"Array", sans-serif; font-size:24px; line-height:1.1; flex:1; }
.c-close { width:36px; height:36px; border-radius:50%; border:0; background:rgba(231,231,227,.12); color:var(--cream); font-size:18px; cursor:pointer; }
.c-stage { position:relative; overflow:hidden; border-radius:12px; aspect-ratio:16 / 10; max-height:58vh; width:100%; margin-top:12px;
           background:#0f0f1d; touch-action:pan-y; }
.c-track { display:flex; height:100%; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.c-slide { flex:0 0 100%; height:100%; position:relative; }
.c-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.c-play { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:84px; height:84px; border-radius:50%; border:0;
          background:var(--accent); color:var(--ink); font-size:30px; padding-left:6px; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.45);
          transition:transform .15s; }
.c-play:hover { transform:translate(-50%, -50%) scale(1.08); }
.c-slide iframe, .c-slide video { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; object-fit:contain; }
#cLink { margin-left:10px; color:var(--accent); text-decoration:none; white-space:nowrap; }
.c-thumbs .vid { position:relative; }
.c-thumbs .vid::after { content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:14px; text-shadow:0 1px 4px #000; }
.c-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0;
         background:rgba(231,231,227,.92); color:var(--ink); font-size:20px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.c-prev { left:12px; } .c-next { right:12px; }
.c-caption { display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-size:16px; }
.c-caption span:last-child { opacity:.6; font-variant-numeric:tabular-nums; }
.c-thumbs { display:flex; gap:6px; overflow-x:auto; margin-top:10px; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:rgba(231,231,227,.3) transparent; }
.c-thumbs button { flex:0 0 66px; height:44px; padding:0; border:2px solid transparent; border-radius:7px; overflow:hidden;
                   background:#0f0f1d; cursor:pointer; opacity:.5; transition:opacity .2s, border-color .2s; }
.c-thumbs button.on { border-color:var(--accent); opacity:1; }
.c-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
/* carousel images rest in black and white; colour comes back on hover, or for a moment after any key press or tap */
.c-slide img, .c-thumbs img { filter:grayscale(1); transition:filter .45s ease; }
.c-stage:hover .c-slide img, .c-thumbs button:hover img,
#carousel.vivid .c-slide img, #carousel.vivid .c-thumbs img { filter:none; }
.c-hint { margin-top:6px; font-size:14px; opacity:.5; }
#carousel.single .c-nav, #carousel.single .c-thumbs { display:none; }
/* stop details, beside the media when there is some, on their own otherwise */
.c-body { display:grid; grid-template-columns:minmax(0, 1fr); gap:20px; margin-top:12px; }
.c-media { min-width:0; }
.c-info p { font-size:17.5px; line-height:1.55; opacity:.85; }
.c-info ul { margin-top:14px; list-style:none; }
.c-info li { padding:9px 0; border-top:1px solid rgba(231,231,227,.12); font-size:16px; }
.c-info li::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:10px; }
.c-media .c-stage { margin-top:0; }
#carousel.no-media { width:min(560px, calc(100vw - 32px)); padding:22px 24px 18px; }
#carousel.no-media .c-media { display:none; }
#carousel.no-media .c-head h2 { font-size:30px; }
@media (min-width:900px) { #carousel:not(.no-media) .c-body { grid-template-columns:300px minmax(0, 1fr); align-items:start; } }

#toast { top:78px; left:50%; transform:translate(-50%, -20px); background:var(--ink); color:var(--cream); padding:12px 20px;
         border-radius:12px; opacity:0; transition:.4s; font-size:16px; text-align:center; }
#toast.show { opacity:1; transform:translate(-50%, 0); }

#start { inset:0; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 42%, rgba(214,214,209,.72) 0%, rgba(150,150,146,.55) 45%, rgba(8,8,8,.88) 100%); backdrop-filter:blur(6px);
         pointer-events:auto; z-index:10; text-align:center; transition:opacity .6s; padding:24px; }
#start .credit { margin-top:6px; font-size:13px; }
#start .credit a { color:inherit; pointer-events:auto; }
#start.hide { opacity:0; pointer-events:none; }
#start h1 { font-family:"Array", sans-serif; font-size:clamp(64px, 14vw, 160px); line-height:.9; }
#start p { margin-top:12px; font-size:21px; }
#start button { margin-top:28px; font:inherit; font-size:21px; padding:16px 34px; border:0; border-radius:999px;
                background:var(--ink); color:var(--cream); cursor:pointer; box-shadow:0 10px 0 #000; transition:transform .1s, box-shadow .1s; }
#start button:active { transform:translateY(6px); box-shadow:0 4px 0 #000; }
#start .keys { font-size:15px; opacity:.7; margin-top:22px; }

#touch { inset:auto 0 0 0; display:none; justify-content:space-between; align-items:flex-end; padding:20px; }
#touch .grp { display:flex; gap:12px; pointer-events:auto; }
#touch button { width:66px; height:66px; border-radius:50%; border:0; background:rgba(27,27,47,.78); color:#fff;
                font:400 20px "Khand", sans-serif; touch-action:none; user-select:none; -webkit-user-select:none; }

@media (max-width:700px) {
  #brand .logo { font-size:22px; }
  #nav { top:84px; transform:none; max-height:none; overflow:visible; left:16px; width:auto; padding:6px; }
  #navToggle { display:block; }
  .nav-list { width:220px; max-height:55vh; overflow-y:auto; margin-top:6px; }
  #nav.collapsed .nav-list { display:none; }
}

/* =====================================================================
   Touch-first browsers (phones and tablets, iPad included): js/main.js puts the "touchscreen" class on <html>.
   They drive with a touch joystick and a DRIFT button. Phones (shortest side up to 600px) also get the "phone"
   class for a compact layout, plus "landscape" when turned sideways. Desktop layouts are not affected.
   ===================================================================== */
#setToggle, #settings, #joy, #joyHint { display:none; }
.touchscreen { --sa-t:env(safe-area-inset-top, 0px); --sa-b:env(safe-area-inset-bottom, 0px);
               --sa-l:env(safe-area-inset-left, 0px); --sa-r:env(safe-area-inset-right, 0px); }
.touchscreen, .touchscreen body { overscroll-behavior:none; }
.touchscreen canvas { touch-action:none; }                 /* no page scroll or pinch zoom while driving */
.touchscreen button { -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.touchscreen #help { display:none; }
.touchscreen .c-close { width:44px; height:44px; flex:none; }

/* driving: a floating joystick appears wherever a finger touches the scene; DRIFT sits in the bottom-left corner */
.touchscreen #touch { display:block; inset:auto auto calc(26px + var(--sa-b)) calc(26px + var(--sa-l)); padding:0; }
.touchscreen #touch .drift { width:80px; height:80px; border:0; border-radius:50%; pointer-events:auto; touch-action:none;
                             font:400 17px "Khand", sans-serif; letter-spacing:2px; padding-left:2px; color:var(--cream);
                             background:rgba(10,10,10,.6); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 2px var(--accent), 0 8px 24px rgba(0,0,0,.35);
                             transition:transform .08s, background .08s, color .08s; }
.touchscreen #touch .drift.on { background:var(--accent); color:var(--ink); transform:scale(.93); }
.joystick #joy { display:block; z-index:4; width:124px; height:124px; margin:-62px 0 0 -62px; border-radius:50%; opacity:0; transform:scale(.7);
                 background:radial-gradient(circle, rgba(10,10,10,.08) 0%, rgba(10,10,10,.38) 100%); backdrop-filter:blur(2px);
                 box-shadow:inset 0 0 0 2px rgba(231,231,227,.5); transition:opacity .15s, transform .15s; }
.joystick #joy.show { opacity:1; transform:scale(1); }
.joystick #joy .knob { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%;
                       background:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.18); }
.touchscreen #joyHint { display:flex; flex-direction:column; align-items:center; gap:12px; left:50%; bottom:calc(132px + var(--sa-b));
                        transform:translateX(-50%); width:max-content; max-width:calc(100vw - 40px); color:var(--cream); font-size:17px;
                        letter-spacing:.5px; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.75); opacity:0; transition:opacity .6s; }
.touchscreen #joyHint.show { opacity:1; }
.touchscreen #joyHint .ring { position:relative; width:70px; height:70px; border-radius:50%; background:rgba(10,10,10,.3);
                              box-shadow:inset 0 0 0 2px rgba(231,231,227,.6); }
.touchscreen #joyHint .ring::after { content:""; position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px;
                                     border-radius:50%; background:var(--accent); animation:joyDemo 2.4s ease-in-out infinite; }
@keyframes joyDemo { 0%, 100% { transform:translate(0, 0); } 20% { transform:translate(0, -19px); } 45% { transform:translate(19px, -8px); }
                     70% { transform:translate(-19px, -8px); } 85% { transform:translate(0, 0); } }

/* ---------- phones: compact layout ---------- */
.phone #brand .sub { display:none; }
/* header: logo and progress, then Zones (left) and Settings (right) */
.phone #brand { top:calc(12px + var(--sa-t)); left:calc(14px + var(--sa-l)); }
.phone #brand .logo { font-size:20px; }
.phone #progress { top:calc(9px + var(--sa-t)); right:calc(14px + var(--sa-r)); padding:7px 13px; font-size:14px; }
.phone #nav { top:calc(52px + var(--sa-t)); left:calc(14px + var(--sa-l)); transform:none; width:auto; max-height:none; overflow:visible; padding:5px; }
.phone #navToggle { display:block; padding:9px 15px; font-size:16px; }
.phone .nav-list { width:min(250px, calc(100vw - 28px)); max-height:min(60dvh, calc(100dvh - 190px)); overflow-y:auto; margin-top:6px; }
.phone #nav.collapsed .nav-list { display:none; }
.phone.landscape .nav-list { max-height:calc(100dvh - 120px - var(--sa-t) - var(--sa-b)); }
.phone #nav:not(.collapsed), .phone #settings.open { z-index:6; background:rgba(10,10,10,.82); }   /* open menus sit over the driving buttons */
.phone .nav-list button { padding:9px 8px; font-size:16.5px; }
.phone #setToggle { display:grid; place-items:center; top:calc(52px + var(--sa-t)); right:calc(14px + var(--sa-r)); width:44px; height:44px;
                    border:0; border-radius:50%; pointer-events:auto; background:rgba(10,10,10,.55); backdrop-filter:blur(6px); color:var(--cream); }
.phone #setToggle svg { width:22px; height:22px; }
.phone #setToggle[aria-expanded="true"] { background:var(--accent); color:var(--ink); }

/* settings panel: weather, accent colour and the music player */
.phone #settings.open { display:flex; flex-direction:column; gap:10px; top:calc(104px + var(--sa-t)); right:calc(14px + var(--sa-r));
                        width:min(272px, calc(100vw - 28px)); max-height:calc(100dvh - 124px - var(--sa-t)); overflow-y:auto;
                        padding:12px; pointer-events:auto; background:rgba(10,10,10,.72); backdrop-filter:blur(8px);
                        border-radius:16px; color:var(--cream); }
.phone #settings .s-label { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; opacity:.5; margin-bottom:-4px; }
.phone #settings > .ui { position:relative; inset:auto; transform:none; }
.phone #settings #weather { justify-content:space-between; }
.phone #settings #weather button { flex:1; padding:9px 0; font-size:15px; }
.phone #settings #accentPick { justify-content:space-between; background:none; backdrop-filter:none; padding:4px 2px; }
.phone #settings #accentPick button { width:32px; height:32px; }
.phone #settings #music { width:auto; background:rgba(231,231,227,.08); backdrop-filter:none; }
.phone #musicNext { width:34px; height:34px; }

/* messages and speed */
.phone #toast { top:calc(104px + var(--sa-t)); width:max-content; max-width:calc(100vw - 32px); font-size:15px; padding:10px 16px; }
.phone #speed { bottom:calc(24px + var(--sa-b)); right:calc(22px + var(--sa-r)); font-size:34px; }

/* the stop card fills the screen with comfortable touch targets */
.phone #carousel { width:calc(100vw - 16px - var(--sa-l) - var(--sa-r)); max-height:calc(100dvh - 16px - var(--sa-t) - var(--sa-b));
                   padding:14px 14px 12px; border-radius:16px; border-top-width:6px; }
.phone #carousel.no-media { width:min(520px, calc(100vw - 16px)); padding:16px 16px 14px; }
.phone .c-head { gap:10px; flex-wrap:wrap; }
.phone .c-head h2 { font-size:21px; }
.phone #carousel.no-media .c-head h2 { font-size:24px; }
.phone .c-close { margin-left:auto; }
.phone .c-body { gap:14px; }
.phone .c-info p { font-size:16px; }
.phone .c-info li { font-size:15px; padding:8px 0; }
.phone .c-nav { width:40px; height:40px; font-size:17px; }
.phone .c-prev { left:8px; } .phone .c-next { right:8px; }
.phone .c-play { width:70px; height:70px; font-size:26px; }
.phone .c-thumbs button { flex-basis:72px; height:48px; }
.phone .c-hint { font-size:13px; }
.phone.landscape #carousel:not(.no-media) .c-body { grid-template-columns:minmax(170px, 32%) minmax(0, 1fr); align-items:start; }
.phone.landscape .c-stage { max-height:calc(100dvh - 160px); }

/* start screen */
.phone #start { padding:calc(20px + var(--sa-t)) 20px calc(20px + var(--sa-b)); overflow-y:auto; }
.phone #start p { font-size:18px; }
.phone #start .keys { font-size:14px; margin-top:18px; }
.phone #start .credit { font-size:11px; }
.phone.landscape #start h1 { font-size:clamp(40px, 9vw, 72px); }
.phone.landscape #start p { margin-top:6px; }
.phone.landscape #start button { margin-top:16px; }