/* ==========================================================================
   Sasha — Portfolio
   Global styles. Everything else in the page uses inline styles (carried over
   verbatim from the original design for pixel-parity); this file holds only the
   rules that cannot be inlined: keyframes, media-query overrides, helper
   classes, and the reduced-motion fallback.
   ========================================================================== */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:#F4EEE2; }
::selection{ background:#FFB22C; color:#1A1815; }
a{ color:inherit; }
input::placeholder, textarea::placeholder{ color:#1A181599; }

/* Toggle panels (Live/Sketch, Before/After) are all present in the DOM and
   shown/hidden by main.js. Inline display styles would beat the [hidden]
   attribute, so force it here. */
[hidden]{ display:none !important; }

/* Let grid children shrink to their track instead of their content's natural
   width — otherwise the case-study mockups overflow and get clipped on phones. */
[data-herogrid] > *, [data-servgrid] > *, [data-casegrid] > *, [data-boardgrid] > * { min-width: 0; }

/* When a mockup is scaled down for mobile (main.js adds .mockup-scaled), its
   internal desktop layouts get cramped. Reflow them to single-column so the
   content stays uniform and readable, like a real responsive site. */
.mockup-scaled [data-dishgrid] { grid-template-columns: 1fr !important; }
/* When the hotel booking bar wraps on mobile, make its button a full-width CTA
   below the dates instead of floating right on its own line. */
.mockup-scaled [data-availbtn] { flex: 1 1 100%; margin-left: 0 !important; text-align: center; }

/* ---- Mobile menu (hamburger) ---- */
.nav-burger{ display:none; }              /* hidden on desktop; the section links show instead */
.nav-menu{ display:none; }                /* only shown at <=880px, and only when opened */
@media (max-width:880px){
  [data-navcta]{ display:none !important; }   /* the CTA moves into the menu on mobile */
  .nav-burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:10px; background:none; border:none; cursor:pointer;
  }
  .nav-burger span{ display:block; height:2px; background:#1A1815; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-menu{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:calc(100% + 8px); right:clamp(12px,4vw,24px); min-width:220px;
    background:#F4EEE2; border:1px solid #1a181514; border-radius:16px;
    box-shadow:0 24px 48px -20px rgba(26,24,21,.4); padding:10px;
  }
  .nav-menu a{
    font-family:'General Sans','Inter',sans-serif; font-weight:500; font-size:16px;
    color:#1A1815; text-decoration:none; padding:12px 14px; border-radius:10px;
  }
  .nav-menu a:hover{ background:#1a18150a; }
  .nav-menu .menu-cta{ margin-top:6px; background:#1A1815; color:#F4EEE2; font-weight:600; text-align:center; }
}

/* --- Keyframes --- */
@keyframes floatcue{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(9px); } }
/* Same bob, but preserves the translateX(-50%) horizontal centering the scroll-cue
   pills rely on (a plain translateY animation would drop it and push them off-centre,
   which clips inside the narrow phone frames). */
@keyframes floatcue-center{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,9px); } }
@keyframes mn_marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mn_glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(124,58,237,.55), 0 0 16px rgba(124,58,237,.45); } 50%{ box-shadow:0 0 0 7px rgba(124,58,237,0), 0 0 30px rgba(124,58,237,.8); } }
@keyframes mn_flicker{ 0%,19%,21%,100%{ opacity:1; } 20%{ opacity:.55; } 63%{ opacity:1; } 65%{ opacity:.7; } }
@keyframes kenburns{ 0%{ background-size:116%; background-position:48% 52%; } 100%{ background-size:132%; background-position:52% 46%; } }

/* --- Helper classes --- */
.mn-marquee-track{ display:inline-flex; white-space:nowrap; animation:mn_marquee 18s linear infinite; }
.mn-glow-btn{ animation:mn_glow 2.4s ease-in-out infinite; }
.mn-flicker{ animation:mn_flicker 4s linear infinite; }
[data-kenburns]{ animation:kenburns 24s ease-in-out infinite alternate; }

/* --- Reduced motion: full fallback (carried over from the original design) --- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-kenburns]{ animation:none !important; }
  .mn-marquee-track,.mn-glow-btn,.mn-flicker{ animation:none !important; }
}

/* --- Responsive overrides --- */
@media (min-width:881px){ [data-navlink]{ display:inline !important; } }
@media (max-width:880px){
  [data-herogrid]{ grid-template-columns:1fr !important; }
  [data-servgrid]{ grid-template-columns:1fr !important; }
  [data-casegrid]{ grid-template-columns:1fr !important; }
}
@media (max-width:1024px){
  [data-boardgrid]{ grid-template-columns:1fr !important; }
  [data-edgepin]{ display:none !important; }
  [data-strings]{ display:none !important; }
  [data-notescol]{ display:grid !important; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; height:auto !important; }
  [data-note]{ position:static !important; transform:none !important; }
}
@media (max-width:560px){ [data-notescol]{ grid-template-columns:1fr !important; } }
@media (max-width:600px){
  #contact input, #contact textarea{ font-size:16px !important; }
  [data-scrollcue]{ font-size:15px !important; padding:8px 16px !important; }
  [data-peek] span{ font-size:16px !important; }
  #about p, #services p, #process p, #contact p{ font-size:17px !important; line-height:1.6 !important; }
  #process h4{ line-height:1.05 !important; }
}
/* All scroll-cue pills centre themselves with translateX(-50%); make their bob
   animation keep that centring (see floatcue-center above). */
[data-scrollcue]{ animation-name:floatcue-center !important; }

/* Keep the "scroll to explore" cue compact and on one line inside the small
   200px phone frames (higher specificity + !important so it also wins over the
   <=600px bump). */
[data-phonepair] [data-scrollcue]{ font-size:11px !important; padding:6px 12px !important; white-space:nowrap !important; }

[data-mobilegrid]{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
[data-mobilegrid] > div{ min-width:0; }
[data-phonepair]{ max-width:100%; }
@media (max-width:1024px){ [data-mobilegrid]{ grid-template-columns:1fr; gap:36px; } }
/* The phone pair scales to fit via the fitMockups() scaler (data-fit), so it no
   longer needs width-specific transform/padding hacks here. */
@media (max-width:560px){ [data-herogrid]{ text-align:left; } }
/* On mobile the hero photo stacks under the CTAs; give it room so the
   "sou eu" note doesn't crowd the button above it. */
@media (max-width:880px){ [data-herophoto]{ margin-top:44px; } }