/* AutoMood Studios — shared styles for Portfolio.html + Work.html */
:root{
  --bg:#0A0A0A;
  --fg:#F2EFE7;
  --mute:#8E8576;
  --line:#1c1916;
  --orange:#C2622C;
  --yellow:#C99A2E;
  --olive:#6B6A2E;
  --forest:#2C3A22;
  --mud:#4A3826;
  --beige:#C9B596;
  --maroon:#5E2A2A;
  --dred:#7A1F1F;
  --accent:var(--orange);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:"PP Neue Montreal","Helvetica Neue",sans-serif;font-weight:400;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;cursor:none}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color .25s ease}
a:hover{color:var(--accent)}
button{background:none;border:0;color:inherit;font:inherit;cursor:none;padding:0}
::selection{background:var(--accent);color:#0a0a0a}
.mono{font-family:"JetBrains Mono",monospace}
.serif{font-family:"PP Neue Montreal",sans-serif;font-weight:400}

.cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--fg);pointer-events:none;z-index:200;mix-blend-mode:difference;transform:translate(-50%,-50%)}
.vf{position:fixed;top:0;left:0;width:120px;height:120px;border:1px solid var(--accent);pointer-events:none;z-index:199;transform:translate(-50%,-50%) scale(.2);opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.vf::before,.vf::after{content:"";position:absolute;background:var(--accent)}
.vf::before{left:50%;top:-6px;bottom:-6px;width:1px;transform:translateX(-50%)}
.vf::after{top:50%;left:-6px;right:-6px;height:1px;transform:translateY(-50%)}
.vf .corner{position:absolute;width:14px;height:14px;border:1px solid var(--accent)}
.vf .corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.vf .corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.vf .corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.vf .corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.vf .label{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.24em;color:var(--accent);text-transform:uppercase;white-space:nowrap}
body.frame .vf{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.frame .cursor{opacity:0}

.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:22px 28px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;mix-blend-mode:difference}
/* fade mask: hides content scrolling beneath the topbar without breaking the difference-blend trick */
.topbar-mask{position:fixed;top:0;left:0;right:0;height:96px;z-index:49;pointer-events:none;background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, rgba(10,10,10,0.6) 80%, transparent 100%)}
.topbar .left{display:flex;flex-direction:column;gap:2px;color:var(--fg)}
.topbar .left .loc{opacity:.6}
.topbar .center{justify-self:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;display:flex;gap:10px;align-items:center;color:var(--fg)}
.topbar .center .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.topbar .right{display:flex;justify-content:flex-end;gap:24px}

.progress{position:fixed;top:0;right:0;height:100vh;width:60px;z-index:40;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;pointer-events:none;mix-blend-mode:difference;opacity:0;transform:translateX(24px);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.progress.visible{opacity:1;transform:translateX(0)}
.progress .num{font-family:"PP Neue Montreal",sans-serif;font-style:italic;font-weight:400;font-size:64px;line-height:1;color:var(--fg)}
.progress .num span{display:block;font-family:"JetBrains Mono",monospace;font-style:normal;font-size:10px;letter-spacing:.24em;margin-top:8px;color:var(--mute);text-align:center}
.progress .bar{width:1px;height:30vh;background:var(--line);margin-top:24px;position:relative}
.progress .bar i{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}

/* ---------- IRIS PAGE TRANSITION (camera-shutter wipe) ---------- */
.iris{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:1}
.iris.hidden{display:none}
.iris svg{width:100%;height:100%;display:block}
.iris .iris-blades{transform-origin:50px 50px;transform:scale(1) rotate(0deg);transition:transform 640ms cubic-bezier(.62,0,.2,1)}
.iris.closed .iris-blades{transform:scale(0) rotate(40deg)}
.iris .iris-tick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);display:flex;gap:14px;align-items:center;white-space:nowrap;opacity:0;transition:opacity 180ms ease}
.iris .iris-tick .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:irisDot 1.2s ease-in-out infinite}
@keyframes irisDot{0%,100%{opacity:1}50%{opacity:.35}}
.iris.closed .iris-tick{opacity:1;transition-delay:340ms}
@media (prefers-reduced-motion: reduce){
  .iris .iris-blades{transition:none;transform:scale(1) rotate(0deg) !important}
  .iris{transition:opacity 160ms ease}
  .iris.closed{opacity:1}
  .iris:not(.closed){opacity:0}
}

/* ---------- WORDMARK WARP TRANSITION (About) ---------- */
.warp-backdrop{position:fixed;inset:0;z-index:40;background:var(--bg);opacity:0;pointer-events:none;transition:opacity 200ms ease-out}
.warp-backdrop.show{opacity:1}
.warp-backdrop.fade{opacity:0;transition:opacity 480ms ease 320ms}
.wordmark-warp{position:fixed;left:0;top:0;z-index:8600;pointer-events:none;margin:0;padding:0;font-family:"PP Neue Montreal",sans-serif;font-style:normal;font-weight:400;color:var(--fg);white-space:nowrap;text-transform:uppercase;letter-spacing:.18em;line-height:1;font-size:clamp(44px,7vw,88px);transform-origin:0 0;opacity:0;will-change:transform,opacity}
.wordmark-warp.shown{opacity:1}
body.warp-active .topbar .left > div:first-child{visibility:hidden}
@media (prefers-reduced-motion: reduce){
  .wordmark-warp,.warp-backdrop{transition:opacity 200ms ease !important}
}

/* ---------- SECTION TITLE CARD (Shop / About chapter card) ---------- */
.section-card{position:fixed;inset:0;z-index:300;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;background:rgba(10,10,10,0);opacity:0;visibility:hidden;transition:opacity 220ms ease, visibility 0s linear 220ms, background 220ms ease}
.section-card.show{opacity:1;visibility:visible;background:rgba(10,10,10,.78);transition:opacity 220ms ease, visibility 0s, background 220ms ease}
.section-card .card-num{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--mute);opacity:0;transform:translateY(8px);transition:opacity 280ms ease 240ms, transform 380ms cubic-bezier(.2,.8,.2,1) 240ms}
.section-card .card-label{font-family:"PP Neue Montreal",sans-serif;font-style:italic;font-weight:400;font-size:clamp(72px,14vw,200px);color:var(--accent);letter-spacing:-.01em;line-height:.95;white-space:nowrap;opacity:0;transform:translateX(-15vw) scale(.85);transform-origin:center;transition:opacity 380ms ease, transform 620ms cubic-bezier(.2,.8,.2,1)}
.section-card.show .card-label{opacity:1;transform:translateX(0) scale(1)}
.section-card.show .card-num{opacity:1;transform:translateY(0)}
.section-card.exiting .card-label{transform:translateX(0) scale(.55);opacity:0;transition:transform 460ms cubic-bezier(.6,0,.25,1), opacity 360ms ease 80ms}
.section-card.exiting .card-num{opacity:0;transition:opacity 200ms ease}
@media (prefers-reduced-motion: reduce){
  .section-card,.section-card .card-label,.section-card .card-num{transition:opacity 180ms ease !important;transform:none !important}
}

/* ---------- FILM LEADER COUNTDOWN (Contact) ---------- */
.leader{position:fixed;inset:0;z-index:400;background:#0A0A0A;display:none;align-items:center;justify-content:center;color:var(--fg);pointer-events:none;opacity:0;transition:opacity 220ms ease}
.leader.on{display:flex;opacity:1}
.leader.fade-out{opacity:0}
.leader-stage{position:relative;width:min(72vmin,640px);aspect-ratio:1/1}
.leader-stage svg{width:100%;height:100%;display:block;overflow:visible}
.leader-num{position:absolute;inset:0;display:grid;place-items:center;font-family:"PP Neue Montreal",sans-serif;font-weight:700;font-style:italic;font-size:clamp(140px,28vmin,320px);line-height:1;color:var(--fg);letter-spacing:-.02em}
.leader-grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.leader .lc{position:fixed;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);padding:24px 28px}
.leader .lc-tl{top:0;left:0}
.leader .lc-tr{top:0;right:0}
.leader .lc-bl{bottom:0;left:0}
.leader .lc-br{bottom:0;right:0}
.leader .lc-tr b{color:var(--accent);font-weight:400}
@media (prefers-reduced-motion: reduce){
  .leader{transition:opacity 160ms ease}
}

/* ---------- FOOTER WORDMARK MARQUEE (shared, all pages) ---------- */
.site-footer{display:flex;flex-direction:column}
.site-footer .foot{padding:20px 28px;border-top:none}
.foot-wordmark{overflow:hidden;position:relative;padding:0 0 12px}
.foot-wordmark .track{display:flex;white-space:nowrap;will-change:transform;font-family:"PP Neue Montreal",sans-serif;font-weight:700;font-size:clamp(40px,7vw,110px);line-height:.86;letter-spacing:-.05em;color:var(--accent)}
.foot-wordmark .track span{display:inline-block;padding-right:.4em}