/* Calculator "value moment" (2026-10-22) for /pet-zodiac-calculator, /cat-birth-chart-calculator and
   /dog-birth-chart-calculator. Loaded only by those three pages; logic in calc-moment.js.
   V1  the button carries the gold seal, and on a phone the form fits above the fold (date first,
       name optional, no orb or breadcrumb above the heading)
   V2  on a phone the result is compact, so the card and its CTA fit one screen
   V3  the locked Moon and Rising pills open a sheet with a real app screen
   Desktop keeps the page as it was, apart from the seal on the button and the new form order.
   Every animation sits under prefers-reduced-motion: no-preference; the resting state is the result. */

/* ── Form ── */
.calc-name { margin: -6px 0 18px; }
.calc-name summary {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  padding: 4px 2px; border-radius: 6px; font-size: 14px; color: var(--accent2-bright);
}
.calc-name summary::-webkit-details-marker { display: none; }
.calc-name summary span { color: var(--muted); }
.calc-name summary::before {
  content: '+'; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(229,200,118,.45); font: 500 13px/1 var(--sans);
}
.calc-name[open] summary::before { content: '\2212'; }
.calc-name[open] summary { margin-bottom: 10px; }
.calc-name .calc-field { margin-bottom: 0; }
.calc-name summary:focus-visible, .calc-nodate:focus-visible { outline: 2px solid var(--accent2-bright); outline-offset: 2px; }
.calc-err { margin: 12px 0 0; font-size: 13px; text-align: center; color: var(--accent2-bright); }
.calc-nodate {
  display: block; margin: 10px auto 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 400 13.5px/1.3 var(--sans); color: var(--muted);
  text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 3px;
}
.calc-nodate:hover { color: var(--ink); }
.calc-hero .sub-short { display: none; }

/* ── The button with the seal (V1) ──
   The white pill is a child layer, so the press can collapse it with transform and opacity only. */
.calc-card .cs-btn {
  position: relative; display: block; height: 54px; padding: 0 56px;
  background: none; -webkit-tap-highlight-color: transparent;
}
.cs-face { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); }
.cs-label { position: relative; z-index: 1; display: block; }
.cs-seal { position: absolute; z-index: 2; right: 7px; top: 50%; width: 40px; height: 40px; margin-top: -20px; }
.cs-seal::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px dashed rgba(201,168,76,.55); }
.cs-seal::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201,168,76,.7), 0 3px 8px rgba(10,8,18,.35); }
/* At rest the seal is one whole image; the two halves only show while it breaks. */
.cs-whole, .cs-half { position: absolute; inset: 0; z-index: 1; }
.cs-half { opacity: 0; }
.cs-whole img, .cs-half img { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* Gold light under the halves: the crack glows instead of showing the white pill through it */
.cs-light {
  position: absolute; inset: 1px; z-index: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #ffe9a8 0%, #e5c876 42%, rgba(201,168,76,.55) 64%, rgba(201,168,76,0) 76%);
}
.cs-l { clip-path: polygon(0 0, 53% 0, 46% 21%, 56% 40%, 45% 61%, 55% 80%, 49% 100%, 0 100%); }
.cs-r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 49% 100%, 55% 80%, 45% 61%, 56% 40%, 46% 21%); }
.cs-seal i {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%;
  background: #f6e4a8; box-shadow: 0 0 6px 1px rgba(229,200,118,.85); opacity: 0; pointer-events: none;
}
.cs-line {
  position: absolute; z-index: 1; left: 22%; right: 22%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(201,168,76,.4), var(--accent2-bright) 60%, #fff3c4);
  box-shadow: 0 0 10px rgba(229,200,118,.55);
  transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cs-btn.is-breaking .cs-l, .cs-btn.is-quick .cs-l { animation: csSealL .24s cubic-bezier(.2,.75,.25,1) forwards; }
  .cs-btn.is-breaking .cs-r, .cs-btn.is-quick .cs-r { animation: csSealR .24s cubic-bezier(.2,.75,.25,1) forwards; }
  .cs-btn.is-breaking .cs-seal::before, .cs-btn.is-quick .cs-seal::before,
  .cs-btn.is-breaking .cs-seal::after, .cs-btn.is-quick .cs-seal::after { animation: csFade .14s ease-out forwards; }
  .cs-btn.is-breaking .cs-whole, .cs-btn.is-quick .cs-whole { animation: csFade 1ms linear forwards; }
  .cs-btn.is-breaking .cs-light, .cs-btn.is-quick .cs-light { animation: csLight .34s ease-out forwards; }
  .cs-btn.is-breaking .cs-seal i, .cs-btn.is-quick .cs-seal i { animation: csSpark .56s cubic-bezier(.2,.7,.3,1) .03s forwards; }
  .cs-btn.is-breaking .cs-seal i:nth-of-type(even) { animation-delay: .07s; animation-duration: .5s; }
  .cs-btn.is-breaking .cs-label { animation: csFade .1s ease-out forwards; }
  .cs-btn.is-breaking .cs-face { animation: csCollapse .34s .04s cubic-bezier(.55,0,.25,1) forwards; }
  .cs-btn.is-breaking .cs-line { animation: csLine .42s .16s cubic-bezier(.3,.7,.25,1) forwards; }
  .cs-btn.is-resealing .cs-whole, .cs-btn.is-resealing .cs-seal::after,
  .cs-btn.is-resealing .cs-label, .cs-btn.is-resealing .cs-face { animation: csBack .32s cubic-bezier(.23,1,.32,1) backwards; }
  /* After a quick re-run only the seal broke, so only the seal comes back */
  .cs-btn.is-resealing.is-seal-only .cs-label, .cs-btn.is-resealing.is-seal-only .cs-face { animation: none; }
}
@keyframes csLight { 0% { opacity: 0; transform: scale(.55); } 22% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes csSealL { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { transform: translate(-9px, 5px) rotate(-18deg); opacity: 0; } }
@keyframes csSealR { 0% { opacity: 1; transform: none; } 55% { opacity: 1; } 100% { transform: translate(9px, 5px) rotate(16deg); opacity: 0; } }
@keyframes csFade { to { opacity: 0; } }
@keyframes csSpark { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@keyframes csCollapse { 55% { transform: scale(.94, .045); opacity: 1; } 100% { transform: scale(.58, .035); opacity: 0; } }
@keyframes csLine { 0% { opacity: 1; transform: scaleX(0); } 82% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes csBack { from { opacity: 0; transform: scale(.94); } }

/* ── Locked pills open the sheet (V3) ── */
.chart-progress button {
  padding: 6px 14px; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; line-height: 1.5;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s, border-color .2s;
}
.chart-progress button svg { width: 9px; height: 11px; opacity: .8; }
.chart-progress button:hover { color: var(--ink); border-color: rgba(229,200,118,.6); }
.chart-progress button:focus-visible { outline: 2px solid var(--accent2-bright); outline-offset: 2px; }

/* ── The sheet with a real app screen (V3) ── */
.calc-sheet {
  width: min(440px, 100% - 32px); max-height: min(88vh, 720px); overflow-y: auto;
  padding: 28px 24px 24px; border: 1px solid rgba(229,200,118,.35); border-radius: 22px;
  background: linear-gradient(170deg, #1d1538, #0c0a17); color: var(--ink); text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
}
.calc-sheet::backdrop { background: rgba(4,3,10,.72); }
.calc-sheet-x {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(7,6,13,.6); color: var(--ink); cursor: pointer;
  font: 400 20px/1 var(--sans);
}
.calc-sheet-x:focus-visible { outline: 2px solid var(--accent2-bright); outline-offset: 2px; }
.calc-sheet-k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.calc-sheet-t { margin: 10px 0 18px; font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.calc-sheet-fig { margin: 0 auto; width: min(300px, 88%); }
/* The Pet Soul screen cut to its Soul Reading card: x 14–526, y 110–510 of the 540 × 1154 screenshot */
.calc-sheet-crop { aspect-ratio: 512 / 400; overflow: hidden; border-radius: 14px; border: 1px solid rgba(229,200,118,.28); background: #111a33; }
.calc-sheet-crop img { display: block; width: 105.47%; height: auto; max-width: none; margin: -21.48% 0 0 -2.73%; }
.calc-sheet-fig figcaption { margin-top: 8px; font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.calc-sheet-p { margin: 16px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.84); }
.calc-sheet .result-cta-link { border: 0; cursor: pointer; font-family: var(--sans); margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .calc-sheet[open] { animation: csSheetIn .3s cubic-bezier(.23,1,.32,1); }
  .calc-sheet[open]::backdrop { animation: csFadeIn .3s ease-out; }
}
@keyframes csSheetIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes csFadeIn { from { opacity: 0; } }

/* ── Phone: the form above the fold, the result in one screen ── */
@media (max-width: 620px) {
  .calc-wrap { padding-top: 16px; }
  .calc-wrap > .breadcrumb { display: none; }   /* the BreadcrumbList schema stays */
  .calc-hero .calc-orb { display: none; }       /* the orb is now the seal on the button */
  /* .calc-wrap prefix: each page's inline <style> loads after this file and ties otherwise */
  .calc-wrap .calc-hero h1 { margin-top: 12px !important; font-size: 34px; }
  .calc-wrap .calc-hero .subtitle { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .calc-hero .sub-long { display: none; }
  .calc-hero .sub-short { display: inline; }
  .calc-wrap .calc-card { margin-top: 14px; padding: 20px 20px 14px; }
  .calc-card .calc-field { gap: 6px; margin-bottom: 14px; }
  .calc-card .calc-field input, .calc-card .calc-field select, .calc-card .date-us select { padding-block: 13px; }
  .calc-name { margin: -4px 0 14px; }

  .calc-wrap .result { margin-top: 22px; padding: 22px 20px 20px; }
  .result .result-sign-symbol { font-size: 46px; }
  .result .result-sign-name { font-size: 25px; margin-top: 6px; text-wrap: balance; }
  .result .result-dates.is-cusp { font: 400 12.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; }
  .calc-wrap .result .divider { margin: 14px auto; max-width: 120px; }
  .result .result-personality {
    max-width: 15em; margin: 0 auto;
    font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 18px; line-height: 1.35;
    color: rgba(255,255,255,.88); text-wrap: balance;
  }
  .result .rp-rest, .result .result-traits { display: none; }
  .result .chart-progress { margin-top: 15px; gap: 7px 6px; }
  .result .chart-progress span, .result .chart-progress button { padding: 6px 10px; font-size: 10.5px; letter-spacing: .02em; }
  .result .result-cta-text { margin-top: 14px; font-size: 13.5px; }
  .result .result-cta-link { margin-top: 12px; }
  .calc-sheet {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}
/* 360 px phones: the subtitle stays on one line, so the button clears the cookie banner */
@media (max-width: 380px) {
  .calc-wrap .calc-hero h1 { font-size: 31px; }
  .calc-wrap .calc-hero .subtitle { font-size: 13.5px; }
}