/* Two Cups site: page styles (from the canvas helmets of Main and Draw, plus the waitlist form). */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ede0d6; }
a { color: inherit; }
a:hover { opacity: .75; }

/* ---------- Main (Vera and the app) ---------- */
@keyframes tcRise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes tcBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

.tcVeraHero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "phone" "side"; gap: 32px; justify-items: start; align-items: start; }
@media (min-width: 760px) {
  .tcVeraHero { grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "text text" "phone side"; column-gap: 48px; row-gap: 40px; }
}
@media (min-width: 1100px) {
  .tcVeraHero { grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); grid-template-areas: "text phone side"; column-gap: 48px; }
  .tcVeraHero h1 { font-size: 46px !important; line-height: 50px !important; }
}

/* The phone keeps its 320 x 672 box before the script fills it, so nothing jumps. */
.tc-phone-slot { width: 320px; height: 672px; }
.tc-phone-still { display: block; width: 320px; height: 672px; box-sizing: border-box; padding: 10px; background: #1B1A17; border-radius: 50px; }
.tc-phone-still img { display: block; width: 300px; height: 652px; border-radius: 40px; object-fit: cover; object-position: 50% 30%; }
/* Narrow phones (under 368px): the hero has 24px side padding, so a 320px phone would overflow.
   Scale the whole phone down to the available width (100vw - 48px) and shrink the slot to match,
   so nothing below overlaps. tan(atan2(a, b)) turns the length ratio a/b into a plain number;
   browsers without it get a fixed 0.85 (fits a 320px screen). */
@media (max-width: 367.98px) {
  .tc-phone-slot { --tc-phone-s: 0.85; width: calc(320px * var(--tc-phone-s)); height: calc(672px * var(--tc-phone-s)); }
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    .tc-phone-slot { --tc-phone-s: tan(atan2(100vw - 48px, 320px)); }
  }
  .tc-phone-slot > div, .tc-phone-slot .tc-phone-still { transform: scale(var(--tc-phone-s)); transform-origin: 0 0; }
}

/* ---------- Card interpreter (Draw helmet) ---------- */
@keyframes tcRiseS { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tcSheetUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes tcFaceIn { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }
@keyframes tcFaceInRev { from { transform: rotateY(-90deg) rotate(180deg); } to { transform: rotateY(0) rotate(180deg); } }
@keyframes tcPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input::placeholder { color: var(--ink-muted); opacity: 1; }
input[type=search]:focus-visible { outline: none; }
label:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Waitlist form ---------- */
.tc-join { display: flex; flex-direction: column; gap: 8px; max-width: 470px; }
.tc-join label { font-size: 15px; font-weight: 600; }
.tc-join-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-join-row input[type=email] { flex: 1 1 220px; min-width: 0; height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(33,24,28,0.18); background: #faf6f2; font-size: 17px; font-family: inherit; color: #21181c; }
.tc-join-row input[aria-invalid="true"] { border-color: #b3261e; }
.tc-join-btn { height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid #A84C25; background: #A84C25; color: #FFFFFF; font-size: 17px; font-weight: 600; font-family: inherit; cursor: pointer; }
.tc-join-btn:hover { background: #943f1c; border-color: #943f1c; }
.tc-join-btn[disabled] { opacity: .7; cursor: default; }
.tc-join-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tc-consent { margin: 0; font-size: 13px; line-height: 18px; color: #5e5157; }
.tc-status { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; min-height: 0; }
.tc-status:empty { display: none; }
.tc-status[data-tone="error"] { color: #b3261e; }
.tc-status[data-tone="ok"] { color: #21181c; }
.tc-turnstile:empty { display: none; }
.tc-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.tc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

[hidden] { display: none !important; }
/* Waitlist buttons that need the sign-up modal (js/modal.js adds .tc-join-ok when it can open). */
html:not(.tc-join-ok) .tc-join-late { display: none !important; }

/* ---------- Waitlist band (after "Private by default") ---------- */
.tc-band-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.tc-band-join h2 { margin: 0; font-size: 34px; line-height: 41px; font-weight: 700; }
.tc-band-join p { margin: 8px 0 0; max-width: 520px; font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; font-size: 19px; line-height: 27px; color: #5e5157; }
.tc-band-btn { height: 54px; padding: 0 28px; border-radius: 999px; border: 0; background: #A84C25; color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tc-band-btn:hover { background: #943f1c; }

/* ---------- Waitlist at the end of the card interpreter ---------- */
.tc-draw-join { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 20px; }
.tc-draw-join p { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }

/* ---------- Footer links: 44 px tall tap targets ---------- */
.tc-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; font-size: 13px; }
.tc-foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; }

@media (prefers-reduced-motion: reduce) {
  /* Talk to Vera (.rd) keeps its own short fades (css/reading.css, "Reduce Motion"). */
  *:not(.rd, .rd *) { animation: none !important; transition: none !important; }
  .tc-drew-cta::after, .tc-gc-art::after { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Hero actions: Talk to Vera, Hear her, Join the waitlist ---------- */
.tc-hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tc-talk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tc-talk-btn { height: 54px; box-sizing: border-box; padding: 0 26px 0 22px; border-radius: 999px; border: 0; background: #A84C25; color: #FFFFFF; display: inline-flex; align-items: center; gap: 10px; font-family: inherit; font-size: 17px; line-height: 22px; font-weight: 600; cursor: pointer; }
.tc-talk-btn:hover { background: #943f1c; }
.tc-talk-btn.is-on { background: #1B1A17; }
.tc-hear-btn { height: 44px; box-sizing: border-box; padding: 0 12px; margin-left: -4px; border-radius: 22px; background: transparent; border: 0; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 15px; line-height: 20px; font-weight: 600; color: #1B1A17; cursor: pointer; }
.tc-hear-btn:hover { background: rgba(27,26,23,0.06); }
.tc-talk-note { margin: 0; max-width: 360px; font-size: 13px; line-height: 18px; color: #5e5157; }
.tc-join-cta { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tc-join-cta-label { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.tc-join-open { height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid #1B1A17; background: transparent; color: #1B1A17; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.tc-join-open:hover { background: #1B1A17; color: #F6F2EA; }

/* An opened card (js/components/Draw.js): its own full-screen page over the site. It scrolls on its
   own and never hands the scroll to the page behind, which is locked while it's open. */
.tc-card-full { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; background: var(--surface-canvas, #EEE8DD); outline: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing: border-box; }

/* ---------- Card guide: motion (js/components/CardGrid.js, Draw.js) ----------
   - Cards are dealt in, row by row, when the guide appears and each time the suit changes
     (.tc-gc-in; data-gen flips between two identical keyframes so the animation restarts).
   - Where scroll-driven animations exist (Safari 26), each card also settles in as it scrolls into view.
   - Touching a card makes it dip, wiggle gently and catch a streak of light (.tc-wiggle, added on
     pointerdown in CardGrid.js, since iOS doesn't apply :active). With a mouse the card lifts, tilts
     towards the pointer and a glare follows it (.is-lit, --gx/--gy/--tx/--ty). A long press doesn't
     open iOS's image preview: the image ignores touches and the card can't be selected or called out.
   - Opening a card morphs it from the grid into its own page (a view transition, Draw.js).
   Reduce Motion turns all of it off (the rule above). Individual transform properties (translate,
   rotate, scale) keep the three layers from overriding each other. */
@keyframes tcDealA { from { opacity: 0; translate: 0 22px; rotate: -3deg; } to { opacity: 1; translate: none; rotate: none; } }
@keyframes tcDealB { from { opacity: 0; translate: 0 22px; rotate: -3deg; } to { opacity: 1; translate: none; rotate: none; } }
.tc-gc-in { animation: tcDealA .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.tc-grid[data-gen="b"] .tc-gc-in { animation-name: tcDealB; }
.tc-gc { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tc-gc img { pointer-events: none; -webkit-user-drag: none; transition: box-shadow .35s cubic-bezier(.2,.8,.2,1); }
.tc-gc-art { position: relative; display: block; border-radius: 5px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
@keyframes tcWiggle {
  0% { scale: 1; rotate: 0deg; }
  16% { scale: .96; rotate: -3deg; }
  36% { scale: .97; rotate: 2.2deg; }
  56% { scale: .985; rotate: -1.4deg; }
  76% { scale: .995; rotate: .7deg; }
  100% { scale: 1; rotate: 0deg; } }
.tc-gc-art.tc-wiggle { animation: tcWiggle .8s cubic-bezier(.3,.7,.4,1); }
/* the glare: a streak of light that crosses the card on a touch, a soft spot that follows the mouse */
@keyframes tcGlare { 0% { opacity: 0; background-position: 130% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
.tc-gc-art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.35) 43%, rgba(255,255,255,.8) 47%, rgba(255,255,255,.3) 52%, rgba(255,255,255,0) 60%) 130% 0 / 260% 100% no-repeat;
  transition: opacity .3s ease; }
.tc-gc-art.tc-wiggle::after { animation: tcGlare .8s ease-out; }
.tc-gc:focus-visible { outline: none; }
.tc-gc:focus-visible img { outline: 2.5px solid var(--focus, #3E5566); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tc-gc:hover .tc-gc-art { transform: translateY(-6px) rotate(-1.5deg); }
  .tc-gc:nth-child(even):hover .tc-gc-art { transform: translateY(-6px) rotate(1.5deg); }
  .tc-gc:hover img { box-shadow: 0 1px 0 rgba(27,26,23,0.14), 0 18px 32px rgba(27,26,23,0.22); }
  .tc-gc:hover .tc-gc-art.is-lit { transform: perspective(700px) translateY(-6px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition-duration: .12s; }
  .tc-gc-art.is-lit::after { opacity: 1; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.42), rgba(255,255,255,.1) 35%, rgba(255,255,255,0) 60%); }
}
@supports (animation-timeline: view()) {
  @keyframes tcSettle { from { opacity: 0; scale: .9; translate: 0 18px; } to { opacity: 1; scale: none; translate: none; } }
  .tc-gc { animation: tcSettle linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}

/* the suit chips */
.tc-chip { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.tc-chip:active { transform: scale(.94); }

/* "I drew these": the two card backs breathe apart and back, and a soft sheen crosses the banner */
@keyframes tcSwayL { 0%, 100% { rotate: 0deg; } 50% { rotate: -6deg; } }
@keyframes tcSwayR { 0%, 100% { rotate: 0deg; } 50% { rotate: 7deg; } }
@keyframes tcSheen { 0%, 70% { translate: -120% 0; } 100% { translate: 220% 0; } }
.tc-drew-cta { position: relative; overflow: hidden; transition: transform .15s ease; -webkit-tap-highlight-color: transparent; }
.tc-drew-cta:active { transform: scale(.98); }
.tc-drew-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(246,242,234,0.10) 45%, rgba(246,242,234,0.16) 50%, transparent);
  animation: tcSheen 6s ease-in-out 1.2s infinite both; }
.tc-drew-backs img:first-child { animation: tcSwayL 5s ease-in-out infinite; }
.tc-drew-backs img:last-child { animation: tcSwayR 5s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) {
  .tc-drew-backs img { transition: translate .3s cubic-bezier(.2,.8,.2,1); }
  .tc-drew-cta:hover .tc-drew-backs img:first-child { animation-play-state: paused; translate: -4px 0; }
  .tc-drew-cta:hover .tc-drew-backs img:last-child { animation-play-state: paused; translate: 4px -4px; }
}

/* opening a card: the grid card flies into place on its page while the page fades in over the guide */
::view-transition-group(tc-card) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(tc-card), ::view-transition-new(tc-card) { animation-duration: .5s; height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
html.tc-vt .tc-card-full > div, html.tc-vt .tc-card-full article { animation: none !important; }