/* ═══════════════════════════════════════════════════
   FATE'S A MOOD — style.css v5
   Greige / Yellow / Pink — flat, no gradients
   EN display : Cinzel
   JP + mixed  : Zen Kaku Gothic Antique
   UI labels   : Zen Kaku Gothic Antique 200w
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700&display=swap');

:root {
  --bg:      #F7F4F0;
  --greige:  #E3DDD5;
  --greige2: #CEC7BC;
  --yellow:  #F5E84A;
  --yellow2: #EDD800;
  --pink:    #F0907E;
  --pink2:   #E05A48;
  --ink:     #2C2923;
  --ink2:    #48443F;
  --ink3:    #7A7570;
  --line:    rgba(44,41,35,.1);
  --line2:   rgba(44,41,35,.16);

  /* font stacks */
  --f-display: 'Cinzel', 'Zen Kaku Gothic Antique', serif;
  --f-ui:      'Zen Kaku Gothic Antique', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* grain */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9990;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.024'/%3E%3C/svg%3E");
}

/* ── cursor ── */
#cur {
  width:8px; height:8px; background:var(--pink2); border-radius:50%;
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  mix-blend-mode:multiply; transition:width .2s, height .2s;
}
#cur-ring {
  width:28px; height:28px; border:1px solid var(--pink2); border-radius:50%;
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998; opacity:.38;
  transition:width .25s, height .25s, opacity .25s;
}
#cur.on      { width:5px; height:5px; }
#cur-ring.on { width:46px; height:46px; opacity:.18; }

/* ── label util ── */
.t-label {
  font-family: var(--f-ui);
  font-size:.6rem; letter-spacing:.28em; font-weight:300;
  text-transform:uppercase; color:var(--ink3);
}
.t-label.pink   { color:var(--pink2); }
.t-label.yellow { color:var(--yellow2); }

/* ── buttons ── */
.btn {
  display:inline-block;
  font-family: var(--f-ui);
  font-weight:400; font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.9rem 2.4rem;
  background:var(--ink); color:var(--bg);
  border:none; cursor:none; text-decoration:none;
  transition:background .18s;
}
.btn:hover { background:var(--ink2); }

.btn-outline {
  background:transparent; color:var(--ink);
  border:1px solid var(--ink2);
}
.btn-outline:hover { background:var(--ink); color:var(--bg); }

/* BUY — flat yellow */
.btn-buy {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%;
  background:var(--yellow); color:var(--ink);
  font-family: var(--f-ui);
  font-weight:500; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  padding:1.05rem; border:none; cursor:none; text-decoration:none;
  transition:background .15s;
}
.btn-buy:hover { background:var(--yellow2); }
.btn-buy-arrow { font-size:.95rem; }


/* ════════════════════════════════════
   ① HERO
════════════════════════════════════ */
#hero {
  min-height:100dvh;
  background:var(--bg);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding:2rem 1rem 2.5rem;
  position:relative; overflow:hidden;
}

/* corner accents */
#hero .corner-tr {
  position:absolute; top:0; right:0;
  width:clamp(80px,22vw,160px); height:clamp(80px,22vw,160px);
  background:var(--yellow);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
}
#hero .corner-bl {
  position:absolute; bottom:0; left:0;
  width:clamp(60px,17vw,120px); height:clamp(60px,17vw,120px);
  background:var(--pink);
  clip-path:polygon(0 0, 0 100%, 100% 100%);
}

.hero-inner {
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; gap:.2rem;
  width:100%;
}

/* ── floating tarot cards — LARGE ── */
.hero-cards {
  display:flex;
  gap:clamp(.5rem,2vw,1rem);
  align-items:flex-end;
  justify-content:center;
  margin-bottom:2.2rem;
  /* allow cards to overflow slightly on narrow screens */
  padding:0 .5rem;
}

.h-card {
  flex-shrink:0;
  /* ▼ bigger: was clamp(64px,16vw,96px) */
  width:clamp(88px,22vw,140px);
  aspect-ratio:5/6;
  border-radius:6px; overflow:hidden;
  box-shadow:0 6px 24px rgba(44,41,35,.13), 0 2px 6px rgba(44,41,35,.07);
  background:var(--greige);
  border:1px solid var(--line2);
  opacity:0; position:relative;
  animation:hcIn .5s ease forwards, hcBob ease-in-out infinite;
}
/* centre card even bigger */
.h-card:nth-child(3) {
  width:clamp(100px,25vw,158px);
}

.h-card img { width:100%; height:100%; object-fit:cover; display:block; }
.h-card-fb {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.35rem;
}
.h-card-fb-txt {
  font-family:var(--f-ui); font-weight:300;
  font-size:.45rem; letter-spacing:.18em; color:var(--ink3);
}

@keyframes hcIn  { to { opacity:1; } }
@keyframes hcBob {
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%    { transform:translateY(-8px) rotate(var(--r,0deg)); }
}
.h-card:nth-child(1){ --r:-16deg; transform:rotate(-16deg) translateY(16px); animation-delay:.2s,.2s;   animation-duration:.5s,4.4s; }
.h-card:nth-child(2){ --r:-5deg;  transform:rotate(-5deg)  translateY(6px);  animation-delay:.35s,.35s; animation-duration:.5s,3.8s; }
.h-card:nth-child(3){ --r:2deg;   transform:rotate(2deg)   translateY(0);    animation-delay:.5s,.5s;   animation-duration:.5s,4.8s; }
.h-card:nth-child(4){ --r:11deg;  transform:rotate(11deg)  translateY(8px);  animation-delay:.65s,.65s; animation-duration:.5s,4.1s; }
.h-card:nth-child(5){ --r:20deg;  transform:rotate(20deg)  translateY(18px); animation-delay:.8s,.8s;   animation-duration:.5s,3.5s; }

/* hero text */
.hero-eyebrow {
  font-family:var(--f-ui); font-weight:300;
  font-size:.58rem; letter-spacing:.28em; color:var(--ink3); text-transform:uppercase;
  margin-bottom:.7rem;
  opacity:0; animation:fslide .5s ease forwards .6s;
}
.hero-title {
  font-family:var(--f-display);
  font-size:clamp(3.2rem,13vw,9rem);
  line-height:.86; letter-spacing:.04em; color:var(--ink); font-weight:700;
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:.4rem;
}
.hero-title .line1,
.hero-title .line2 { display:flex; overflow:hidden; }
.hero-title .line2 { color:var(--pink2); }

.title-char {
  display:inline-block;
  transform:translateY(110%); opacity:0;
  animation:charUp .65s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes charUp { to { transform:translateY(0); opacity:1; } }

.hero-sub {
  font-family:var(--f-ui); font-weight:300;
  font-size:clamp(.88rem,2.6vw,1.1rem); color:var(--ink2);
  margin:.5rem 0 1.8rem;
  opacity:0; animation:fslide .5s ease forwards .9s;
}
@keyframes fslide { to { opacity:1; transform:none; } }

.hero-pill {
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--f-ui); font-weight:400; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase;
  padding:1rem 2.8rem;
  background:var(--ink); color:var(--bg);
  border:none; cursor:none;
  opacity:0; transform:translateY(8px);
  animation:fslide .5s ease forwards 1.05s;
  transition:background .18s;
}
.hero-pill:hover { background:var(--pink2); }
.hero-pill-dot {
  width:6px; height:6px; border-radius:50%; background:var(--yellow); flex-shrink:0;
  animation:dotP 2s ease-in-out infinite 1.8s;
}
@keyframes dotP { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.9); } }


/* ════════════════════════════════════
   ② QUIZ
════════════════════════════════════ */
#quiz-section {
  min-height:100dvh; background:var(--bg);
  display:none; flex-direction:column;
  align-items:center; padding:3rem 1.2rem 5rem;
}

.prog-wrap { width:100%; max-width:480px; margin-bottom:2.6rem; }
.prog-track { display:flex; gap:3px; margin-bottom:.5rem; }
.prog-seg { flex:1; height:2px; background:var(--greige); transition:background .35s; }
.prog-seg.done { background:var(--ink); }
.prog-seg.now  { background:var(--pink2); }
.prog-label {
  font-family:var(--f-ui); font-weight:300;
  font-size:.54rem; letter-spacing:.2em; color:var(--ink3); text-align:right;
}

.quiz-wrap { width:100%; max-width:480px; }
#quiz-inner { transition:opacity .22s, transform .22s; }
#quiz-inner.fade-out { opacity:0; transform:translateX(12px); }

.q-counter {
  font-family:var(--f-ui); font-weight:300;
  font-size:.54rem; letter-spacing:.26em; text-transform:uppercase; color:var(--pink2);
  margin-bottom:.5rem;
}
.q-text {
  font-family:var(--f-display);
  font-size:clamp(1.35rem,5.5vw,2.2rem); color:var(--ink); line-height:1.15; font-weight:600;
  margin-bottom:.3rem;
}
.q-hint {
  font-family:var(--f-ui); font-weight:300;
  font-size:.9rem; color:var(--ink3); margin-bottom:1.8rem;
}

/* 2×2 choice cards */
.q-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }

.q-card {
  background:var(--bg); border:1px solid var(--greige);
  padding:1.1rem .85rem 1rem; cursor:none;
  display:flex; flex-direction:column;
  align-items:flex-start; gap:.38rem;
  position:relative; overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.q-card::after {
  content:''; position:absolute; inset:0;
  background:var(--yellow); opacity:0; transition:opacity .2s; z-index:0;
}
.q-card:hover  { border-color:var(--pink); transform:translateY(-2px); }
.q-card.picked { border-color:var(--yellow2); }
.q-card.picked::after { opacity:1; }
.q-card > * { position:relative; z-index:1; }

.q-card-check {
  position:absolute; top:.6rem; right:.65rem;
  width:15px; height:15px; border:1px solid var(--greige); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.5rem; color:transparent; transition:all .2s; z-index:1;
}
.q-card.picked .q-card-check { background:var(--ink); border-color:var(--ink); color:var(--yellow); }

.q-card-letter {
  font-family:var(--f-ui); font-weight:300;
  font-size:.48rem; letter-spacing:.2em; color:var(--ink3);
}
.q-card-label {
  font-family:var(--f-ui); font-weight:400;
  font-size:.88rem; color:var(--ink); line-height:1.3;
}
.q-card-sub {
  font-family:var(--f-ui); font-weight:300;
  font-size:.72rem; color:var(--ink3);
}

.ripple {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:rgba(245,232,74,.45); width:8px; height:8px;
  transform:translate(-50%,-50%);
  animation:ripOut .5s ease-out forwards;
}
@keyframes ripOut { to { width:220px; height:220px; opacity:0; } }


/* ════════════════════════════════════
   ③ RESULT
════════════════════════════════════ */
#result-section { display:none; background:var(--bg); }
#result-section.show { display:block; }

.result-top {
  background:var(--greige);
  padding:3rem 1.5rem 2.5rem; text-align:center;
}

.res-eyebrow {
  font-family:var(--f-ui); font-weight:300;
  font-size:.54rem; letter-spacing:.28em; color:var(--pink2); text-transform:uppercase;
  margin-bottom:1.8rem;
}

/* result card — 5:6 ratio */
.result-card-link {
  display:block;
  width:clamp(220px,58vw,300px); aspect-ratio:5/6;
  margin:0 auto;
  cursor:none; text-decoration:none;
  position:relative; overflow:hidden;
  border:1px solid var(--line2); background:var(--bg);
  transition:transform .25s, box-shadow .25s;
  box-shadow:0 4px 22px rgba(44,41,35,.1);
}
.result-card-link:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 32px rgba(44,41,35,.16);
}
.result-card-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .7s ease; opacity:0;
}
.result-card-img.loaded { opacity:1; }

.result-card-fallback {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.7rem; padding:1.5rem; background:var(--greige);
}
.rcf-roman {
  font-family:var(--f-ui); font-weight:300;
  font-size:.54rem; letter-spacing:.25em; color:var(--pink2);
}
.rcf-name {
  font-family:var(--f-display); font-size:.95rem; font-weight:600;
  color:var(--ink); text-align:center; line-height:1.3;
}
.rcf-note {
  font-family:var(--f-ui); font-weight:300;
  font-size:.44rem; letter-spacing:.12em; color:var(--ink3); text-align:center;
}

/* BUY — flush under card */
.result-buy-wrap {
  width:clamp(220px,58vw,300px); margin:0 auto 2rem;
}

/* result info */
.res-name {
  font-family:var(--f-display);
  font-size:clamp(1.6rem,7vw,3rem); font-weight:700;
  color:var(--ink); line-height:.9; margin-bottom:.4rem;
}
.res-type {
  font-family:var(--f-ui); font-weight:300;
  font-size:clamp(.88rem,2.8vw,1.1rem); color:var(--pink2); margin-bottom:.9rem;
}
.res-desc {
  font-family:var(--f-ui); font-weight:300; font-size:1rem;
  color:var(--ink2); line-height:1.8; max-width:300px; margin:0 auto 1.8rem;
}
.res-lucky { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.luck-tile {
  background:var(--bg); border:1px solid var(--line);
  padding:.75rem 1rem; text-align:left; min-width:115px;
}
.luck-lbl {
  font-family:var(--f-ui); font-weight:300;
  font-size:.48rem; letter-spacing:.22em; color:var(--pink2); margin-bottom:.25rem; text-transform:uppercase;
}
.luck-val {
  font-family:var(--f-ui); font-weight:400; font-size:.88rem; color:var(--ink);
}

/* coord + products */
.coord-zone {
  background:var(--bg); padding:3rem 1.5rem 3.5rem;
  border-top:1px solid var(--line);
}
.coord-head { max-width:480px; margin:0 auto 1.5rem; }
.coord-title {
  font-family:var(--f-display);
  font-size:clamp(1.15rem,4.5vw,1.85rem); font-weight:600;
  color:var(--ink); line-height:1;
}

.coord-scroll {
  display:flex; gap:.7rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:.5rem; scrollbar-width:none;
}
.coord-scroll::-webkit-scrollbar { display:none; }

.ci {
  flex:0 0 142px; background:var(--bg); border:1px solid var(--line);
  text-decoration:none; color:inherit; cursor:none;
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.ci:hover { transform:translateY(-4px); box-shadow:0 7px 24px rgba(44,41,35,.1); }
.ci-img { aspect-ratio:5/6; overflow:hidden; position:relative; }
.ci-img-inner {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem;
}
.ci-img-txt {
  font-family:var(--f-ui); font-weight:300;
  font-size:.4rem; letter-spacing:.14em; color:rgba(44,41,35,.3); text-align:center; line-height:1.4;
}
.ci-badge {
  position:absolute; top:.5rem; left:.5rem;
  background:var(--yellow); color:var(--ink);
  font-family:var(--f-ui); font-weight:300;
  font-size:.4rem; letter-spacing:.1em; padding:.18rem .45rem; z-index:1;
}
.ci-info { padding:.55rem .65rem .65rem; }
.ci-role {
  font-family:var(--f-ui); font-weight:300;
  font-size:.44rem; letter-spacing:.2em; color:var(--pink2); margin-bottom:.18rem;
}
.ci-name {
  font-family:var(--f-ui); font-weight:400;
  font-size:.82rem; color:var(--ink); line-height:1.3; margin-bottom:.18rem;
}
.ci-price {
  font-family:var(--f-ui); font-weight:300;
  font-size:.58rem; color:var(--ink3);
}

/* ── BOTTOM CTA ── */
#bottom-cta {
  background:var(--yellow); padding:4rem 1.5rem; text-align:center; display:none;
}
.btm-t {
  font-family:var(--f-display);
  font-size:clamp(2rem,9vw,5rem); font-weight:700;
  line-height:.88; color:var(--ink); margin-bottom:.6rem;
}
.btm-sub {
  font-family:var(--f-ui); font-weight:300;
  font-size:1rem; color:var(--ink2); margin-bottom:1.8rem;
}
.pill-row { display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }

/* footer */
footer {
  background:var(--bg); padding:1.6rem 1.5rem;
  border-top:1px solid var(--line); display:none;
}
.foot-row {
  display:flex; justify-content:space-between; align-items:center;
  max-width:480px; margin:0 auto;
}
.foot-logo {
  font-family:var(--f-ui); font-weight:300;
  font-size:.54rem; letter-spacing:.2em; color:var(--ink3);
}
.foot-copy {
  font-family:var(--f-ui); font-weight:300;
  font-size:.44rem; letter-spacing:.1em; color:var(--ink3); opacity:.4;
}

/* scroll reveal */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .55s, transform .55s; }
.reveal.vis { opacity:1; transform:none; }



/* ─────────────────────────────────
   CIAOPANIC LOGO — inline SVG
───────────────────────────────── */

/* hero: above card deck, centred */
.hero-logo-wrap {
  position: relative; z-index: 2;
  margin-top: -1.6rem;   /* pull upward */
  margin-bottom: 2rem;
  opacity: 0;
  animation: fslide .5s ease forwards .3s;
  text-align: center;
}
.hero-logo-svg {
  display: inline-block;
  width: clamp(210px, 56vw, 336px);  /* 140% of original */
  height: auto;
}
.hero-logo-svg svg {
  width: 100%; height: auto; display: block;
}
.hero-logo-svg svg path,
.hero-logo-svg svg rect,
.hero-logo-svg svg polygon,
.hero-logo-svg svg g path,
.hero-logo-svg svg g rect {
  fill: #2C2923 !important;  /* black */
}

/* quiz: small watermark at bottom */
.quiz-logo-wrap {
  margin-top: 2.6rem;
  text-align: center;
  opacity: .28;
}
.quiz-logo-svg {
  display: inline-block;
  width: clamp(90px, 24vw, 130px);
  height: auto;
}
.quiz-logo-svg svg {
  width: 100%; height: auto; display: block;
}
.quiz-logo-svg svg path,
.quiz-logo-svg svg rect,
.quiz-logo-svg svg polygon,
.quiz-logo-svg svg g path,
.quiz-logo-svg svg g rect {
  fill: var(--ink) !important;
}

/* ─────────────────────────────────
   SHARE BUTTON & ZONE
───────────────────────────────── */
.share-zone {
  display: flex; flex-direction: column;
  align-items: center; gap: .7rem;
  padding: 1.4rem 1.5rem .2rem;
}

.btn-share {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--bg);
  font-family: var(--f-ui); font-weight: 400;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .95rem 2.4rem;
  border: none; cursor: none;
  transition: background .18s;
  position: relative; overflow: hidden;
}
.btn-share::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--pink2);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.77,0,.175,1);
}
.btn-share:hover::before { transform: scaleX(1); }
.btn-share > * { position: relative; z-index: 1; }

.btn-share-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-size: .65rem; line-height: 1;
  animation: shareIconBounce 2s ease-in-out infinite;
}
@keyframes shareIconBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.share-hint {
  font-family: var(--f-ui); font-weight: 300;
  font-size: .58rem; letter-spacing: .14em;
  color: var(--ink3); text-align: center; line-height: 1.6;
  min-height: 1.2rem;
}

/* share loading overlay */
.share-loading {
  position: fixed; inset: 0;
  background: rgba(247,244,240,.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; z-index: 9995;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.share-loading.show { opacity: 1; pointer-events: all; }
.share-loading-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--greige);
  border-top-color: var(--pink2);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.share-loading-txt {
  font-family: var(--f-ui); font-weight: 300;
  font-size: .65rem; letter-spacing: .2em; color: var(--ink2);
}

/* bottom cta share button */
.btn-share-cta {
  display: inline-block;
  font-family: var(--f-ui);
  font-weight: 400; font-size: .7rem;
  letter-spacing: .22em; text-transform: uppercase;
  padding: .9rem 2rem;
  background: var(--pink); color: var(--ink);
  border: none; cursor: none;
  transition: background .18s;
}
.btn-share-cta:hover { background: var(--pink2); }


/* ── Mobile: result card 1.5× larger ── */
@media (max-width:600px) {
  .result-card-link {
    width: clamp(260px, 78vw, 340px);
  }
  .result-buy-wrap {
    width: clamp(260px, 78vw, 340px);
  }
}

@media (max-width:360px) {
  .hero-cards .h-card:nth-child(1),
  .hero-cards .h-card:nth-child(5) { display:none; }
  .q-card { padding:.9rem .7rem .85rem; }
}