/* ============================================================
   Giulia — portfolio styles
   Palette: warm cream + DEVI navy, with a switchable accent.
   ============================================================ */

:root{
  --cream:#FBF4E8;
  --cream-deep:#F3E7D2;
  --navy:#16244B;
  --navy-soft:#22315c;
  --ink:#1a1a22;

  /* accent is swapped by the theme toggle */
  --accent:#E2613B;        /* Timbits: warm glazed orange */
  --accent-soft:#F6C28A;
  --accent-ink:#7a2e12;

  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-mood="boba"]{
  --accent:#7C5CCB;        /* Boba: milk-tea purple */
  --accent-soft:#C9B8F0;
  --accent-ink:#3c2a73;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

/* ---------- theme pill ---------- */
.theme-pill{
  position:fixed; top:18px; right:18px; z-index:50;
  display:flex; align-items:center; gap:6px;
  background:rgba(22,36,75,.9);
  backdrop-filter:blur(8px);
  padding:6px 8px; border-radius:999px;
  box-shadow:0 6px 24px rgba(22,36,75,.25);
}
.theme-pill__label{
  color:var(--cream); font-family:"DM Mono",monospace;
  font-size:.7rem; padding-left:8px; opacity:.7; letter-spacing:.05em;
}
.theme-pill__btn{
  border:0; cursor:pointer; border-radius:999px;
  padding:6px 14px; font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-size:.8rem; color:var(--cream);
  background:transparent; transition:all .3s var(--ease);
}
.theme-pill__btn.is-active{ background:var(--accent); color:#fff }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 80% -10%, var(--accent-soft) 0%, transparent 45%),
    linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 100%);
  overflow:hidden;
  transition:background .6s var(--ease);
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--navy) .6px, transparent .6px);
  background-size:22px 22px; opacity:.04;
}
.hero__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 28px; width:100%;
  position:relative; z-index:2;
}
.eyebrow{
  font-family:"DM Mono",monospace; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:24px;
}
.hero__name{
  font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(4rem,17vw,12.5rem);
  line-height:.85; color:var(--navy);
  letter-spacing:-.03em;
}
.hero__hi{
  display:block; font-family:"Fraunces",serif; font-style:italic;
  font-weight:500; font-size:clamp(1.3rem,4vw,2.4rem);
  color:var(--accent); letter-spacing:0; margin-bottom:.1em;
}
.hero__tag{
  max-width:34ch; margin-top:32px; font-size:clamp(1.05rem,2.4vw,1.4rem);
  color:var(--navy-soft);
}
.hero__tag em{ font-family:"Fraunces",serif; font-style:italic; color:var(--accent) }
.hero__scroll{
  display:inline-block; margin-top:44px;
  font-family:"DM Mono",monospace; font-size:.85rem;
  color:var(--navy); text-decoration:none;
  border-bottom:2px solid var(--accent); padding-bottom:3px;
  transition:gap .3s;
}
.hero__scroll span{ display:inline-block; transition:transform .3s var(--ease) }
.hero__scroll:hover span{ transform:translateY(4px) }

/* ---------- marquee ---------- */
.marquee{
  background:var(--navy); color:var(--cream);
  padding:16px 0; overflow:hidden; white-space:nowrap;
  border-top:3px solid var(--accent); border-bottom:3px solid var(--accent);
  transition:border-color .6s var(--ease);
}
.marquee__track{
  display:inline-flex; align-items:center; gap:24px;
  font-family:"Fraunces",serif; font-style:italic; font-weight:600;
  font-size:1.5rem; animation:scroll 26s linear infinite;
}
.marquee .dot{ color:var(--accent); transition:color .6s var(--ease) }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- section bits ---------- */
.section-eyebrow{
  font-family:"DM Mono",monospace; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
.section-eyebrow--light{ color:var(--accent-soft) }

/* ---------- about ---------- */
.about{ max-width:var(--maxw); margin:0 auto; padding:120px 28px }
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center }
.about__h{
  font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(2rem,4.5vw,3.4rem); line-height:1.02;
  color:var(--navy); margin-bottom:28px; letter-spacing:-.02em;
}
.about__text p{ color:var(--navy-soft); margin-bottom:18px }
.about__text strong{ color:var(--accent); font-weight:700 }
.quick{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:34px;
  background:var(--cream-deep); border:1px solid var(--cream-deep); border-radius:14px; overflow:hidden }
.quick__item{ background:var(--cream); padding:16px 20px; display:flex; flex-direction:column; gap:2px }
.quick__k{ font-family:"DM Mono",monospace; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent-ink); opacity:.7 }
.quick__v{ font-weight:700; color:var(--navy); font-size:1.05rem }

.about__photo{ position:relative }
.about__photo img{
  border-radius:18px; box-shadow:0 24px 60px rgba(22,36,75,.22);
  transform:rotate(1.4deg); transition:transform .5s var(--ease);
}
.about__photo img:hover{ transform:rotate(0) }
.about__photo figcaption{
  font-family:"Fraunces",serif; font-style:italic; color:var(--navy-soft);
  margin-top:16px; text-align:center; font-size:.95rem;
}

/* ---------- reflection ---------- */
.reflect{ background:var(--navy); color:var(--cream); padding:120px 28px;
  transition:background .6s var(--ease) }
.reflect__inner{ max-width:var(--maxw); margin:0 auto; text-align:center }
.reflect__h{ font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(2rem,5vw,3.6rem); margin-bottom:12px; letter-spacing:-.02em }
.reflect__sub{ color:var(--accent-soft); margin-bottom:56px }
.bubble{ position:relative; display:inline-block; margin:0 auto }
.bubble__cloud{
  background:var(--cream); color:var(--navy);
  border-radius:50% / 60%; padding:54px 70px;
  display:flex; flex-direction:column; gap:6px; align-items:center;
  font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(1.8rem,5vw,3rem); line-height:1.1;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.bubble__opt{ transition:color .4s var(--ease), transform .4s var(--ease) }
.bubble__opt.is-picked{ color:var(--accent); transform:scale(1.08) }
.bubble__or{ font-style:italic; font-weight:500; font-size:.6em; color:var(--navy-soft) }
.bubble__tail,.bubble__tail2{
  position:absolute; left:18%; background:var(--cream); border-radius:50%;
}
.bubble__tail{ width:34px; height:34px; bottom:-26px }
.bubble__tail2{ width:18px; height:18px; bottom:-52px; left:12% }
.reflect__caption{ margin-top:64px; font-family:"DM Mono",monospace;
  font-size:.82rem; color:var(--accent-soft); opacity:.8 }

/* ---------- traits ---------- */
.traits{ max-width:var(--maxw); margin:0 auto; padding:120px 28px }
.traits__h{ font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(2rem,4.5vw,3.4rem); color:var(--navy);
  margin-bottom:48px; letter-spacing:-.02em }
.traits__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.card{
  background:var(--cream); border:2px solid var(--navy);
  border-radius:18px; padding:30px 26px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .4s;
}
.card:hover{ transform:translateY(-8px); background:var(--accent-soft);
  box-shadow:0 20px 40px rgba(22,36,75,.18) }
.card__num{ font-size:2rem; display:block; margin-bottom:14px }
.card h3{ font-family:"Fraunces",serif; font-weight:900; font-size:1.35rem;
  color:var(--navy); margin-bottom:8px }
.card p{ font-size:.95rem; color:var(--navy-soft) }

/* ---------- farewell ---------- */
.farewell{
  background:
    radial-gradient(120% 100% at 20% 0%, var(--accent) 0%, transparent 50%),
    var(--navy);
  color:var(--cream); padding:140px 28px; text-align:center;
  transition:background .6s var(--ease);
}
.farewell__inner{ max-width:780px; margin:0 auto }
.farewell__quote{
  font-family:"Fraunces",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.6rem,4vw,2.8rem); line-height:1.25; letter-spacing:-.01em;
}
.farewell__sign{ margin-top:28px; font-family:"DM Mono",monospace;
  letter-spacing:.1em; color:var(--accent-soft) }

/* ---------- footer ---------- */
.foot{ background:var(--cream); text-align:center; padding:80px 28px 60px }
.foot__big{ font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(2rem,6vw,3.5rem); color:var(--navy); letter-spacing:-.02em }
.foot__small{ margin-top:14px; font-family:"DM Mono",monospace;
  font-size:.78rem; color:var(--navy-soft); opacity:.7; letter-spacing:.05em }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .about__grid{ grid-template-columns:1fr; gap:40px }
  .traits__grid{ grid-template-columns:1fr 1fr }
  .about,.traits,.reflect{ padding-top:80px; padding-bottom:80px }
}
@media (max-width:520px){
  body{ font-size:17px }
  .quick{ grid-template-columns:1fr }
  .traits__grid{ grid-template-columns:1fr }
  .theme-pill__label{ display:none }
  .bubble__cloud{ padding:42px 44px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}