/* Manuel Martinez — Portfolio · Phase 6: Figma-exact text overlays on aspect-locked stage */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#0d0f10;overflow-x:hidden;font-family:'Manrope',system-ui,sans-serif}
a{text-decoration:none;color:inherit}

.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:9002;background:linear-gradient(90deg,#9BC4B4,#C8923C);transition:width .12s linear}

/* fixed stage, aspect-locked frame centered (letterbox) */
.viewport{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:#0d0f10;overflow:hidden}
.frame{position:relative;overflow:hidden}            /* sized by JS to 2533:1299 */
.spacer{position:relative;z-index:0}
.vwrap{position:absolute;inset:0}
.seg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity;transition:opacity .55s ease}
.overlays{position:absolute;inset:0;z-index:30;pointer-events:none}

/* per-scene layer */
.layer{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.layer.on{opacity:1;pointer-events:auto}
.t{position:absolute;white-space:pre-wrap;will-change:transform,opacity}
.t.light{text-shadow:0 2px 14px rgba(0,0,0,.5)}

/* consistent menu */
.menu{position:fixed;top:0;left:0;right:0;z-index:9001;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2vw,30px) clamp(22px,3.4vw,56px);
  background:linear-gradient(180deg,rgba(15,12,8,.32),rgba(15,12,8,0))}
.logo{width:46px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(250,242,227,.85);border-radius:4px;
  font-family:'Marcellus SC',serif;font-size:20px;color:#faf2e3;text-shadow:0 1px 10px rgba(0,0,0,.4);letter-spacing:.04em}
/* even, calm rhythm: one base gap, small consistent offsets for cta + lang */
.links{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px)}
.lnk{font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(12px,1vw,14px);letter-spacing:.14em;color:#faf2e3;text-shadow:0 1px 10px rgba(0,0,0,.45);position:relative;padding:6px 0;cursor:pointer;transition:color .3s}
/* a touch more breathing room before the CONTACT call-to-action */
.cta{margin-left:clamp(2px,.5vw,8px)}
/* clear, divided grouping for the language control */
.lang-switch{margin-left:clamp(6px,.9vw,12px);padding-left:clamp(10px,1.2vw,16px);border-left:1px solid rgba(250,242,227,.20)}
.lnk::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:#C8923C;transition:right .35s ease}
.lnk:hover{color:#fff}.lnk:hover::after{right:0}
.cta{border:1px solid rgba(250,242,227,.55);border-radius:999px;padding:9px 20px}
.cta::after{display:none}
.cta:hover{background:#C8923C;border-color:#C8923C;color:#241a0b}

@media(max-width:760px){ .links{gap:14px} }

/* logo in menu */
.logo{border:none;padding:0}
.logo img{height:42px;width:auto;display:block;filter:drop-shadow(0 1px 8px rgba(0,0,0,.45))}
/* hero logo */
.t.img{padding:0}
.t.img img{display:block;width:auto;filter:drop-shadow(0 2px 16px rgba(0,0,0,.5))}
/* interactive desk pins */
.t.pin{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:.4em;transition:transform .3s ease,color .3s ease,text-shadow .3s ease}
.t.pin::before{content:"";width:.34em;height:.34em;border-radius:50%;background:#E58A2E;box-shadow:0 0 10px rgba(229,138,46,.7);flex:none;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
/* desk idle words (about, work, tools & approach, scroll to step in…) — hover the WORD too */
.t.desk{pointer-events:auto;cursor:pointer;transform-origin:left center;transition:transform .3s ease,color .3s ease,text-shadow .3s ease}
.t.desk:hover{transform:translateY(-3px) scale(1.12);color:#fff !important;text-shadow:0 2px 18px rgba(0,0,0,.55)}
/* keep the orange dot reacting too */
.t.pin:hover::before{transform:scale(1.55);background:#ffb15a;box-shadow:0 0 20px rgba(229,138,46,.95)}

/* nav hover — a bit more feedback on top of the underline slide */
.lnk{transition:color .3s ease,transform .25s ease}
.lnk:hover{transform:translateY(-1px)}

/* nav logo (top-left) hover */
.logo img{transition:transform .35s ease,filter .35s ease}
.logo:hover img{transform:scale(1.1) rotate(-3deg);filter:drop-shadow(0 2px 16px rgba(155,196,180,.65))}

/* language switch button — matches nav styling */
.lang-btn{background:transparent;border:1px solid rgba(250,242,227,.5);border-radius:999px;
  padding:7px 13px;font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(11px,.9vw,13px);
  letter-spacing:.12em;color:#faf2e3;cursor:pointer;text-shadow:0 1px 10px rgba(0,0,0,.45);
  transition:background .3s,border-color .3s,color .3s,transform .25s}
.lang-btn:hover{background:#9BC4B4;border-color:#9BC4B4;color:#1a1a1a;transform:translateY(-1px)}

/* clickable external links on the contact scene (e.g. Instagram) */
.t.extlink{pointer-events:auto;cursor:pointer;transition:color .25s ease,transform .25s ease;text-underline-offset:.18em}
.t.extlink:hover{color:#C8923C !important;text-decoration:underline}

/* animated text appearance — each line fades + rises when its scene becomes active */
.t .t-in{display:inline-block;opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.7,.2,1),transform .7s cubic-bezier(.22,.7,.2,1)}
.layer.on .t .t-in{opacity:1;transform:translateY(0)}

/* language dropdown */
.lang-switch{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px}
.lang-caret{font-size:.72em;opacity:.85;transition:transform .25s ease}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:158px;list-style:none;margin:0;padding:6px;
  background:rgba(15,12,8,.94);backdrop-filter:blur(10px);border:1px solid rgba(250,242,227,.18);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:9002}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:7px;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;color:#faf2e3;cursor:pointer;
  transition:background .2s ease,color .2s ease}
.lang-menu li::after{content:attr(data-lang);text-transform:uppercase;font-size:11px;letter-spacing:.1em;opacity:.45}
.lang-menu li:hover{background:rgba(155,196,180,.16)}
.lang-menu li.active{color:#9BC4B4}
.lang-menu li.active::after{opacity:.9;color:#9BC4B4}