/* =========================================================
   Takarda — custom.css
   Hand styles that Tailwind utilities can't express:
   tokens, the jagged "deckle-edge" motif, timeline thread,
   scroll galleries, badges, and motion.
   ========================================================= */

:root{
  --violet:   #6C4CF1;
  --violet-2: #5636C9;
  --coral:    #FF5D8F;
  --lime:    #D6FF3F;
  --sky:   #22C7B5;
  --sky-2: #189485;
  --cream:   #FFFFFF;
  --parchment: #F4F1FF;
  --ink:     #161221;
  --ink-70:  rgba(22,18,33,.7);
  --ink-45:  rgba(22,18,33,.45);
}

html{ scroll-behavior:smooth; }
html, body{
  overflow-x:hidden; /* safety net: rotated badge-stickers and absolute
                         accents shouldn't be able to force a horizontal
                         scrollbar on narrow viewports */
  max-width:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}

.font-display{ font-family:'Lora',ui-serif,Georgia,serif; }
.font-mark{ font-family:'Caveat',cursive; }

/* Rotating hero word — crossfades between a few resonant verbs.
   Driven by js/main.js; degrades to a single static word if
   prefers-reduced-motion is set (see the reduced-motion block above,
   which also short-circuits the JS interval). */
.word-rotate{
  display:inline-block;
  transition:opacity .35s ease, transform .35s ease;
}
.word-rotate.is-swapping{
  opacity:0;
  transform:translateY(6px);
}

::selection{ background:var(--lime); color:var(--ink); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid var(--violet);
  outline-offset:3px;
  border-radius:2px;
}

/* -----------------------------------------------------------
   Signature motif: the deckle / torn-paper edge.
   Used once per page, sparingly, echoing the wordmark's
   irregular silhouette and the idea of a hand-torn sheet
   of takarda (paper).
   ----------------------------------------------------------- */
.deckle-bottom{
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 92%,
    96% 100%, 90% 90%, 84% 100%, 78% 91%, 72% 100%,
    66% 90%, 60% 100%, 54% 92%, 48% 100%, 42% 91%,
    36% 100%, 30% 90%, 24% 100%, 18% 91%, 12% 100%,
    6% 90%, 0% 100%
  );
}
.deckle-top{
  clip-path: polygon(
    0% 8%, 6% 0%, 12% 9%, 18% 0%, 24% 9%, 30% 0%, 36% 9%,
    42% 0%, 48% 9%, 54% 0%, 60% 9%, 66% 0%, 72% 9%,
    78% 0%, 84% 9%, 90% 0%, 96% 9%, 100% 0%,
    100% 100%, 0% 100%
  );
}

/* Torn-edge divider strip (thin, decorative) */
.torn-strip{
  height:18px;
  background:var(--cream);
  clip-path: polygon(
    0% 100%, 100% 100%, 100% 0%,
    94% 60%, 88% 10%, 82% 65%, 76% 5%, 70% 60%,
    64% 15%, 58% 55%, 52% 0%, 46% 60%, 40% 10%,
    34% 65%, 28% 5%, 22% 60%, 16% 15%, 10% 55%, 4% 0%, 0% 60%
  );
}

/* -----------------------------------------------------------
   Sticker badge — echoes the hand-lettered "Takarda" stickers
   in the brand board. Used sparingly as a section accent.
   ----------------------------------------------------------- */
.badge-sticker{
  display:inline-flex;
  align-items:center;
  padding:.35rem 1rem .45rem;
  clip-path: polygon(
    3% 20%, 10% 2%, 22% 12%, 35% 0%, 48% 10%, 62% 1%, 75% 11%,
    88% 2%, 97% 18%, 100% 40%, 94% 55%, 100% 72%, 90% 88%,
    78% 98%, 65% 90%, 52% 100%, 38% 91%, 25% 100%, 12% 90%,
    2% 78%, 6% 55%, 0% 38%
  );
  transform:rotate(-2deg);
  font-family:'Caveat',cursive;
  font-weight:700;
  letter-spacing:.02em;
}

/* -----------------------------------------------------------
   Past / Present / Future thread — a stitched binding line
   connecting the three eras, like thread through paper.
   ----------------------------------------------------------- */
.thread-line{
  background-image: repeating-linear-gradient(
    to right, var(--ink-45) 0 10px, transparent 10px 20px
  );
  height:2px;
}
@media (min-width: 768px){
  .thread-line-v{
    background-image: repeating-linear-gradient(
      to bottom, var(--ink-45) 0 10px, transparent 10px 20px
    );
    width:2px;
  }
}

/* -----------------------------------------------------------
   Impact gallery — horizontal scroll-snap
   ----------------------------------------------------------- */
.impact-scroller{
  display:flex;
  gap:1.25rem;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom:1rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin;
  scrollbar-color: var(--violet) var(--parchment);
}
.impact-scroller::-webkit-scrollbar{ height:8px; }
.impact-scroller::-webkit-scrollbar-track{ background:var(--parchment); border-radius:99px; }
.impact-scroller::-webkit-scrollbar-thumb{ background:var(--violet); border-radius:99px; }
.impact-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:78%;
}
@media (min-width:640px){ .impact-card{ width:46%; } }
@media (min-width:1024px){ .impact-card{ width:29%; } }

/* Placeholder tile for images the client will supply later */
.photo-placeholder{
  background:
    repeating-linear-gradient(135deg, rgba(22,18,33,.06) 0 12px, transparent 12px 24px),
    var(--parchment);
  border:1.5px dashed var(--ink-45);
}

/* -----------------------------------------------------------
   Reveal-on-scroll — one quiet, orchestrated entrance,
   not per-card hover choreography.
   ----------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Nav underline that draws in on hover/focus */
.nav-link{ position:relative; }
.nav-link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-3px;
  height:2px; background:var(--violet);
  transition:right .25s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after{ right:0; }

/* Buttons
   Every variant shares the same hover language: a small lift,
   a soft shadow that grows in, and a color shift — so hover
   always reads clearly regardless of which button it is. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; border-radius:.35rem;
  padding:.85rem 1.6rem;
  border:1.5px solid transparent;
  box-shadow:0 0 0 0 rgba(22,18,33,0);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{
  transform:translateY(-2px);
}
.btn:active{
  transform:translateY(0);
  box-shadow:none !important;
}

.btn-violet{ background:var(--violet); color:var(--cream); border-color:var(--violet); }
.btn-violet:hover{ background:var(--violet-2); border-color:var(--violet-2); box-shadow:0 10px 22px -8px rgba(86,54,201,.5); }

.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); box-shadow:0 10px 22px -8px rgba(22,18,33,.35); }

.btn-cream{ background:var(--cream); color:var(--violet); border-color:var(--cream); }
.btn-cream:hover{ background:#fff; box-shadow:0 10px 22px -8px rgba(22,18,33,.35); }

.btn-whatsapp{ background:#25D366; color:#fff; border-color:#25D366; }
.btn-whatsapp:hover{ background:#1DA851; border-color:#1DA851; box-shadow:0 10px 22px -8px rgba(29,168,81,.55); }

/* Mobile menu */
#mobile-menu{ transition:max-height .3s ease, opacity .25s ease; overflow:hidden; }
#mobile-menu[data-open="false"]{ max-height:0; opacity:0; }
#mobile-menu[data-open="true"]{ max-height:480px; opacity:1; }

/* Category chip (blog filter) */
.chip{
  border:1.5px solid var(--ink); color:var(--ink);
  padding:.4rem 1rem; border-radius:99px; font-size:.875rem; font-weight:600;
  transition:background-color .15s ease, color .15s ease;
}
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--cream); }

/* Accordion caret rotation for <details> */
details > summary{ list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker{ display:none; }
details[open] .caret{ transform:rotate(180deg); }
.caret{ transition:transform .2s ease; }

/* Line-length comfort for long-form text */
.prose-takarda{ max-width:62ch; }