/* =========================
   Riska Oktaviani — styles.css
   ========================= */

:root{
  --ink:#111111;
  --ink-muted:#2a2a2a;
  --paper:#fffaf2;
  --soft:#f3eee5;
  --line:#d9d1c3;
  --accent:#9f8868;
  --accent-2:#6f624f;
  --sage:#6f8a76;
  --shadow: 0 10px 30px rgba(17,17,17,.08);
  --focus:#3b82f6;
  --header-h: 84px; /* fallback, JS sets exact value */

  /* Intro animation sizing */
  --intro-size: 300px;                  /* desktop logo size */
  --intro-shift: calc(var(--intro-size) * 0.32); /* per-side separation (big) */
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f5efe6;
    --ink-muted:#e7dfd2;
    --paper:#0e0e0e;
    --soft:#151515;
    --line:#303030;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  body{ background:#0b0b0b; }
}
/* tablet */
@media (max-width: 960px){
  :root{
    --intro-size: 240px;
    --intro-shift: calc(var(--intro-size) * 0.34); /* ~82px */
  }
}
/* mobile */
@media (max-width: 480px){
  :root{
    --intro-size: 190px;
    --intro-shift: calc(var(--intro-size) * 0.36); /* ~68px */
  }
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink); background:var(--paper);
  font:16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  letter-spacing:.01em; text-rendering:optimizeLegibility;
  padding-top: var(--header-h); /* space for fixed header */
}
a{ color:inherit; text-decoration:none }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:6px;
}

/* Utilities */
.container{ max-width:1200px; margin:0 auto; padding:24px }
.flex{ display:flex; }
.row-center{ align-items:center; gap:18px; }
.between{ justify-content:space-between; }
.wrap{ flex-wrap:wrap; }
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.rule{ height:2px; background:var(--line); flex:1 }
section{
  margin:72px 0;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important }
}

/* ===== Header (FIXED) ===== */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--paper) 92%, transparent),
    color-mix(in oklab, var(--paper) 70%, transparent)
  );
  border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:14px }
.brand svg{ width:42px; height:42px; flex:0 0 auto }
.wordmark{ font-size:18px; font-weight:700; letter-spacing:.22em; text-transform:uppercase }
nav{ margin-left:auto; display:flex; gap:22px; align-items:center }
.nav-link{ font-weight:700 }
.nav-link:hover{ text-decoration:underline; text-underline-offset:4px }

/* ===== HERO ===== */
.hero{
  position:relative; overflow:hidden; border-radius:28px; margin-top:20px;
  box-shadow:var(--shadow); border:1px solid var(--line);
  background:
    radial-gradient(1200px 400px at 70% 10%, rgba(159,136,104,.22), transparent 60%),
    radial-gradient(900px 400px at 20% 100%, rgba(111,138,118,.18), transparent 60%),
    linear-gradient(180deg, #fffaf2, #f4ede3);
}
@media (prefers-color-scheme: dark){
  .hero{
    background:
      radial-gradient(900px 320px at 70% 10%, rgba(159,136,104,.16), transparent 60%),
      radial-gradient(700px 280px at 20% 100%, rgba(111,138,118,.14), transparent 60%),
      linear-gradient(180deg, #141414, #0f0f0f);
  }
}
.hero-inner{ display:grid; grid-template-columns: 1.2fr 1fr; gap:10px }
.hero-copy{ padding:64px 48px }
.eyebrow{
  letter-spacing:.35em; text-transform:uppercase; font-size:14px; font-weight:800;
  color:var(--ink); padding-bottom:10px; position:relative;
}
.eyebrow::after{
  content:""; position:absolute; left:0; bottom:0; width:160px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--sage)); opacity:.95;
}
h1{ margin:.5em 0 .35em; font-size:44px; line-height:1.12; font-weight:800; letter-spacing:.005em }
.sub{ font-size:18px; max-width:70ch; color:var(--ink-muted) }
.cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:12px 18px;
  border:2px solid var(--ink); border-radius:999px; font-weight:700; background:transparent; cursor:pointer;
  transition:transform .15s ease;
}
.cta:hover{ transform:translateY(-1px) }

/* ===== Tiles ===== */
.tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; padding:18px }
.tile{
  height:180px; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--soft); position:relative;
}
.tile small{
  position:absolute; left:12px; bottom:10px;
  background:rgba(255,255,255,.96);
  color:#111; border:1px solid var(--line);
  padding:6px 10px; border-radius:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
}
@media (prefers-color-scheme: dark){
  .tile small{ background:rgba(20,20,20,.92); color:#f5efe6; border-color:#3a3a3a }
}
.fabric{
  background:
    radial-gradient(180px 60px at 20% 20%, rgba(159,136,104,.45), transparent 60%),
    radial-gradient(140px 50px at 65% 40%, rgba(111,98,79,.35), transparent 60%),
    radial-gradient(160px 70px at 40% 80%, rgba(111,138,118,.28), transparent 60%),
    linear-gradient(125deg, #f0e9df 0%, #faf6ef 40%, #ebe3d6 100%);
  filter:contrast(1.02) saturate(1.02);
}
.embroidery{
  background:
    radial-gradient(500px 200px at 10% 10%, rgba(159,136,104,.12), transparent 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><defs><pattern id="stitch" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(12)"><path d="M2 12 L12 2 M12 22 L22 12" stroke="%236f624f" stroke-width="1.4" stroke-linecap="round"/></pattern></defs><rect width="100%" height="100%" fill="%23efe8dc"/><rect width="100%" height="100%" fill="url(%23stitch)" opacity="0.7"/></svg>') center/auto;
}
.arch{
  background:
    conic-gradient(from 90deg at 80% 20%, rgba(159,136,104,.16), rgba(159,136,104,0) 30%),
    repeating-linear-gradient(-12deg, #ece4d6, #ece4d6 2px, #f8f3ec 2px, #f8f3ec 16px);
}
.linen{
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><defs><filter id="n" x="-50%" y="-50%" width="200%" height="200%"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0.35"/><feComponentTransfer><feFuncA type="table" tableValues="0 .06"/></feComponentTransfer></filter></defs><rect width="100%" height="100%" fill="%23efe9dd"/><rect width="100%" height="100%" filter="url(%23n)"/></svg>') center/300px 300px,
    linear-gradient(180deg, #eee6d8, #e8decd);
}
.light{
  background:
    radial-gradient(220px 90px at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%),
    radial-gradient(260px 120px at 70% 70%, rgba(159,136,104,.24), rgba(159,136,104,0) 80%),
    linear-gradient(120deg, #fbf6ee 0%, #efe7db 100%);
}

/* Section heads */
.section-head{ display:flex; align-items:baseline; gap:12px }
.section-head h2{ font-size:28px; letter-spacing:.01em; margin:0; font-weight:800 }

/* ===== ETHOS ===== */
.ethos{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:18px }
.card{
  border:1px solid var(--line); border-radius:18px; padding:22px; background:var(--soft); box-shadow:var(--shadow);
}
.kicker{
  text-transform:uppercase; letter-spacing:.24em;
  font-size:12px; font-weight:800;
  background:linear-gradient(90deg, var(--accent) 0%, var(--sage) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.card h3{ margin:.4em 0 .2em; font-size:18px; font-weight:800 }
.muted{ color:var(--ink-muted) }

/* ===== DESIGNER ===== */
.designer{
  border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow);
  background:
    radial-gradient(900px 300px at 10% 10%, rgba(159,136,104,.18), transparent 60%),
    radial-gradient(800px 280px at 90% 90%, rgba(111,138,118,.16), transparent 60%),
    linear-gradient(180deg, #fbf6ee, #efe6d8);
}
@media (prefers-color-scheme: dark){
  .designer{ background:linear-gradient(180deg, #171717, #101010) }
}
.designer-inner{ display:grid; grid-template-columns: 1fr 1.2fr }
.designer-art{
  min-height:100%; padding:32px; border-right:1px solid var(--line);
  background:
    conic-gradient(from 140deg at 60% 40%, rgba(159,136,104,.22), rgba(159,136,104,0) 55%),
    repeating-linear-gradient(18deg, #efe3d2, #efe3d2 2px, #fbf6ee 2px, #fbf6ee 16px);
}
.designer-copy{ padding:40px 36px }
.designer h3{ margin:0 0 .4rem; font-size:26px; letter-spacing:.005em; font-weight:800 }
.designer .subtitle{ margin:0 0 1rem; font-weight:700; color:var(--accent-2); letter-spacing:.02em }
.designer p{ margin:.6rem 0; color:var(--ink-muted) }

/* ===== Notify / Launch ===== */
.notify{
  max-width:720px; margin:0 auto; text-align:center;
  padding:48px 24px; border:1px solid var(--line); border-radius:22px; background:var(--soft); box-shadow:var(--shadow);
}
.notify h2{ font-size:30px; margin:0 0 .4rem; font-weight:800; letter-spacing:.01em }
.notify p{ color:var(--ink-muted); margin:.3rem 0 .8rem }
.notify form{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.notify input[type="email"]{
  width:320px; max-width:100%;
  padding:12px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#111;
}
@media (prefers-color-scheme: dark){
  .notify input[type="email"]{ background:#1a1a1a; color:#f5efe6 }
}
.notify button{
  padding:12px 16px; border-radius:999px; border:1px solid var(--line);
  font-weight:700; cursor:pointer; background:linear-gradient(90deg, var(--accent-2), var(--sage)); color:#fff;
}
.links{ margin-top:14px; display:flex; align-items:center; justify-content:center; gap:14px; font-size:14px }
.dot{ opacity:.3 }

/* ===== Footer ===== */
.footer{ border-top:1px solid var(--line); padding:32px 0; margin-top:48px }
.badge{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--soft) }
.mono{ font-family: ui-monospace,Menlo,Consolas,monospace; font-size:14px }

/* ===== Responsive ===== */
@media (max-width: 960px){
  .hero-inner{ grid-template-columns: 1fr }
  .tiles{ grid-template-columns: 1fr 1fr }
  .ethos{ grid-template-columns: 1fr 1fr }
  .designer-inner{ grid-template-columns: 1  }
  .designer-art{ display:none }
}
@media (max-width: 640px){
  .tiles{ grid-template-columns: 1fr }
  .ethos{ grid-template-columns: 1fr }
  h1{ font-size:36px }
  .wordmark{ font-size:16px }
}

/* ===== Intro overlay (centered RO split + wordmark reveal) ===== */
.intro{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .6s ease, visibility 0s linear .6s;
}
@media (prefers-color-scheme: dark){
  .intro{ background:#0b0b0b; }
}
.intro.hidden{ opacity:0; visibility:hidden; }

/* Skip button */
.intro-skip{
  position: absolute; top: 20px; right: 20px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--soft);
  font-weight: 700; cursor: pointer;
}
.intro-skip:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* Stack logo + wordmark */
.intro-stack{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 18px;
}

/* Logo sizing */
.intro-logo{ width: var(--intro-size); height: var(--intro-size); }

/* Ensure groups move within SVG while SVG stays centered */
#intro-R, #intro-O {
  transform-box: fill-box;
  transform-origin: center;
}

/* Play state triggers the split animations (slower, end-weighted) */
.intro.play #intro-R,
.intro.play #intro-O{
  animation-duration: 1800ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 200ms;
}
.intro.play #intro-R{ animation-name: intro-split-R; }
.intro.play #intro-O{ animation-name: intro-split-O; }

/* Whole logo “breathe” while splitting */
.intro.play .intro-logo{
  animation: intro-logo-fade 1800ms cubic-bezier(.2,.8,.2,1) 200ms forwards;
}

/* Wordmark reveal (below the logo) */
.intro-wordmark{
  font-weight:800;
  letter-spacing:.18em; /* slightly tighter to fit comfortably */
  text-transform:uppercase;
  font-size: clamp(16px, 3.2vw, 22px);
  line-height:1;
  color: var(--ink);
  opacity: 0;                 /* hidden until reveal stage */
  transform: translateY(6px);
}
@media (prefers-color-scheme: dark){
  .intro-wordmark{ color: var(--ink) }
}

/* Hide characters marked as skip (e.g., the text “O”) */
.intro-wordmark .ch[data-skip="true"]{ display:none; }

/* Prepare per-letter animation */
.intro-wordmark .ch{
  display:inline-block;
  opacity:0;
  transform: translateY(8px);
}

/* When we enter the reveal stage, animate the wordmark + stagger letters */
.intro.reveal .intro-wordmark{
  opacity:1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease;
}
.intro.reveal .intro-wordmark .ch{
  animation: intro-letter .9s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 60ms);
}

/* Keyframes */
@keyframes intro-split-R {
  0%,55% { transform: translateX(0) }
  100%   { transform: translateX(calc(var(--intro-shift) * -1)) } /* big left move */
}
@keyframes intro-split-O {
  0%,55% { transform: translateX(0) }
  100%   { transform: translateX(var(--intro-shift)) }            /* big right move */
}
@keyframes intro-logo-fade{
  0%   { opacity: 1;   transform: scale(1) }
  70%  { opacity: 1;   transform: scale(1.01) }
  100% { opacity: .92; transform: scale(1.06) }
}
@keyframes intro-letter{
  0%   { opacity:0; transform: translateY(8px); }
  60%  { opacity:1; transform: translateY(0); }
  100% { opacity:1; transform: translateY(0); }
}

/* Respect reduced-motion: never show overlay */
@media (prefers-reduced-motion: reduce){
  .intro{ display:none !important; }
}

/* ===== HERO SHOWCASE (portrait-friendly) ===== */
.hero-showcase {
  position: relative;
  padding: 0;
  margin: 0 0 clamp(24px, 5vh, 48px);
}

.hero-slider {
  position: relative;
  width: 100%;
  height: min(92vh, 860px);               /* tall & cinematic; adapts */
  min-height: 520px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow, 0 10px 30px rgba(17,17,17,.08));
  background: #0e0e0e;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider { height: auto; }
}

/* Slide (use background-image for better portrait composition) */
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: var(--pos, center center);
  transform: scale(1.02);                 /* micro zoom for parallax feel */
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease, transform 8s ease;
}
.hero-slide.is-active {
  opacity: 1; visibility: visible; transform: scale(1);
}

/* Caption wrapper */
.hero-caption {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 8vh, 80px);
  margin: 0 auto; width: min(92vw, 1000px);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
  padding: 0 clamp(12px, 2vw, 24px);
}
.hero-caption .eyebrow {
  letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; opacity: .9;
  margin: 0 0 .25rem;
}
.hero-title {
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin: 0 0 .35rem;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 60ch; opacity: .95; margin: 0;
}

/* Overlays for legibility */
.hero-overlay.top {
  position: absolute; inset: 0 0 auto 0; height: 40%;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent);
}
.hero-overlay.bottom {
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}

/* Controls */
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(4px);
}
.hero-nav:hover { background: rgba(0,0,0,.4); }
.hero-nav.prev { left: 12px; }
.hero-nav.next { right: 12px; }

/* Dots */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; gap: 8px; justify-content: center;
}
.hero-dots .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.45); border: none; cursor: pointer;
  text-indent: -9999px; overflow: hidden;
}
.hero-dots .dot.is-active { background: #fff; }

/* Pause/Play */
.hero-toggle {
  position: absolute; right: 12px; bottom: 12px;
  font-size: .85rem; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25); color: #fff; cursor: pointer;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* Make sure header doesn’t overlap rounded hero radius */
header + .container .hero-showcase { margin-top: 0; }

/* Designer photo css*/
.designer-inner {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}
@media (min-width: 900px) {
  .designer-inner {
    grid-template-columns: 1fr 1fr;
  }
}
.designer-photo img {
  border-radius: 12px;
  box-shadow: var(--shadow, 0 10px 30px rgba(17,17,17,.08));
}

/* ===== Thank-you & Check-email shared ===== */
.thanks-hero {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  align-items: center;
}
.thanks-logo {
  width: 72px; height: 72px; border-radius: 20px;
  box-shadow: var(--shadow);
}
@media (min-width: 768px){
  .thanks-hero { gap: 1.25rem 1.5rem; }
  .thanks-logo { width: 88px; height: 88px; }
}
.badge-soft {
  display: inline-block;
  padding: .25rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--ink-muted);
  background: var(--soft);
}