/* TIRA website. Materials come from the booth: oxblood velvet curtain, cream lightbox, brushed aluminium, teak. */

:root {
  --cream: #F9EDDA;
  --cream-text: rgba(249, 237, 218, .78);
  --cream-faint: rgba(249, 237, 218, .5);
  --ox: #4D0D13;
  --brown: #4a3529;
  --night: #090909;
  --deco: "Archivo", -apple-system, system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { color: var(--cream); font-family: var(--body); line-height: 1.45; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.deco { font-family: var(--deco); font-stretch: 125%; text-transform: uppercase; }

/* ---------- curtain: the app's CurtainGlow (9 pleats from SeededRandom(1971), 466 px wide like a phone screen) ---------- */
.curtain {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden;
  background: 0 0 / 466px 100% repeat-x linear-gradient(90deg, #090202 0.00%, #280708 0.96%, #36090b 2.35%, #5a1919 4.10%, #36090b 5.54%, #280708 7.17%, #090202 7.97%, #280708 9.33%, #36090b 12.21%, #471313 14.71%, #36090b 16.76%, #280708 18.21%, #090202 19.35%, #280708 20.72%, #36090b 24.14%, #531717 26.66%, #36090b 28.71%, #280708 29.63%, #090202 30.77%, #280708 32.25%, #36090b 35.55%, #3f1111 38.27%, #36090b 40.49%, #280708 41.89%, #090202 43.13%, #280708 44.03%, #36090b 46.10%, #5e1a1a 47.76%, #36090b 49.12%, #280708 49.92%, #090202 50.68%, #280708 52.17%, #36090b 55.69%, #541717 58.41%, #36090b 60.64%, #280708 61.83%, #090202 63.07%, #280708 64.22%, #36090b 64.99%, #521617 67.11%, #36090b 68.85%, #280708 71.76%, #090202 72.72%, #280708 74.12%, #36090b 76.88%, #4f1616 79.44%, #36090b 81.53%, #280708 83.19%, #090202 84.35%, #280708 86.23%, #36090b 88.35%, #531717 91.79%, #36090b 94.61%, #280708 98.43%, #090202 100.00%);
}
/* Light from above, then the app's fade: 55 % curtain at the top, full by 20 %, easing down to 45 % at the bottom. */
.curtain::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(9,9,9,.45) 0%, rgba(9,9,9,0) 20%, rgba(9,9,9,0) 45%, rgba(9,9,9,.024) 51.9%, rgba(9,9,9,.086) 58.75%, rgba(9,9,9,.174) 65.6%, rgba(9,9,9,.275) 72.5%, rgba(9,9,9,.376) 79.4%, rgba(9,9,9,.464) 86.25%, rgba(9,9,9,.526) 93.1%, rgba(9,9,9,.55) 100%),
    linear-gradient(rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.2) 80%);
}
/* Soft light and shadow folds drifting on their own rhythms (home screen sway). Built by script.js. */
.sway { position: absolute; inset: 0; }
.sway i { position: absolute; top: 0; bottom: 0; transform-origin: 50% 0; will-change: transform;
  animation: sway var(--d) ease-in-out infinite alternate; }
@keyframes sway { from { transform: scaleX(.93) skewX(calc(var(--t) * -1)); } to { transform: scaleX(1.08) skewX(var(--t)); } }

/* ---------- layout ---------- */
.top { display: flex; justify-content: center; padding: 18px 16px 0; }
.top img { height: 40px; width: auto; }

section { padding: 56px 16px; }
.row { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.copy { text-align: center; max-width: 30em; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.title { font-family: var(--deco); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: .15em; line-height: 1.3; color: var(--cream); }
.line { font-size: 17px; color: var(--cream-text); }

@media (min-width: 900px) {
  section { padding: 64px 32px; }
  .top img { height: 56px; }
  .row { flex-direction: row; justify-content: space-between; gap: 64px; }
  .row > * { flex: 1 1 0; }
  .row.flip .art { order: -1; }
  .copy { text-align: left; align-items: flex-start; }
  .title { font-size: 31px; }
  .line { font-size: 19px; }
  .art { display: flex; justify-content: center; }
}

/* ---------- 1. hero: a strip hanging under a warm spot ---------- */
.hero { padding-top: 26px; overflow: hidden; }
.hero .row { gap: 32px; }
.hero .art { position: relative; display: flex; justify-content: center; order: -1; }
.hero .art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 620px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,214,160,.16), transparent 70%); pointer-events: none; }
.strip { position: relative; width: 90px; transform-origin: 50% 0; transform: rotate(-3deg); animation: hang 7s ease-in-out infinite alternate; }
.strip img { width: 100%; box-shadow: 0 16px 34px rgba(0,0,0,.7); }
@keyframes hang { from { transform: rotate(-3deg); } to { transform: rotate(-1.6deg); } }
.hero h1 { font-size: 24px; }
.soon { font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--cream-faint); margin-top: 10px; }

@media (min-width: 900px) {
  .hero { padding-top: 40px; padding-bottom: 96px; }
  .hero .row { gap: 40px; }
  .hero .art { order: 0; }
  .hero .copy { flex-grow: 1.5; max-width: none; }
  .hero h1 { font-size: 40px; white-space: nowrap; }
  .strip { width: 132px; }
}

/* ---------- email sign-up: cream field + the app's aluminium push button ---------- */
.notify { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.notify[hidden] { display: none; }
/* Dark velvet field with a thin cream outline (Joseph 2026-10-30: the cream box read yellow next to the aluminium). */
.notify input { height: 54px; border: 0; border-radius: 10px; padding: 0 18px; font: 500 17px var(--body); color: var(--cream);
  background: rgba(10,4,5,.55);
  box-shadow: inset 0 0 0 1px rgba(249,237,218,.45), inset 0 2px 6px rgba(0,0,0,.5); }
/* Placeholder as a wide caps label, like COMING SOON TO THE APP STORE above it. */
.notify input::placeholder { color: rgba(249,237,218,.5); font-family: var(--deco); font-stretch: 125%; font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; }
.notify input:focus { outline: 2px solid rgba(249,237,218,.8); outline-offset: 2px; }
.thanks { font-size: 17px; color: var(--cream); min-height: 54px; display: flex; align-items: center; }
.thanks[hidden] { display: none; }

/* VintagePushButtonStyle(metal:): brushed aluminium bezel, a near-black gap, a flat brushed face, engraved label */
.push { position: relative; isolation: isolate; height: 57px; border: 0; border-radius: 10px; cursor: pointer; padding: 0 28px;
  font-family: var(--deco); font-stretch: 125%; font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #212121;
  text-shadow: 0 .75px 0 rgba(255,255,255,.85), 0 -.4px .3px rgba(0,0,0,.25);
  background: url(assets/brushed.png) 0 0 / 171px 85px, linear-gradient(#dbdbdb, #b8b8b8, #c7c7c7); background-blend-mode: overlay, normal;
  box-shadow: 0 2px 2px rgba(0,0,0,.6), inset 0 .75px 0 rgba(255,255,255,.6), inset 0 -.75px 0 rgba(0,0,0,.35); }
.push::before { content: ""; position: absolute; inset: 3px; border-radius: 7px; background: #0a0a0a; z-index: -1; }
.push::after { content: ""; position: absolute; inset: 5.5px; border-radius: 5px; z-index: -1; box-shadow: 0 1.5px 1.2px rgba(0,0,0,.55);
  background: url(assets/brushed.png) 0 0 / 171px 85px, #c9c9c9; background-blend-mode: overlay, normal; transition: filter .1s; }
.push:active::after { filter: brightness(.9); }
.push:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

@media (min-width: 560px) {
  .notify { flex-direction: row; }
  .notify input { flex: 1; min-width: 0; height: 57px; }
}

/* ---------- 2. the print develops under the slot ---------- */
.develop .art { flex-direction: column; align-items: center; }
.slot { position: relative; z-index: 2; width: 340px; max-width: 100%; height: 32px; margin-top: 30px; border-radius: 2px;
  background: url(assets/brushed.png) 0 0 / 171px 85px, linear-gradient(#f1f1ef, #b4b5b1 55%, #d9d9d6); background-blend-mode: overlay, normal;
  box-shadow: 0 5px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7); }
.slot::before { content: ""; position: absolute; left: 30px; right: 30px; top: 13px; height: 6px; border-radius: 3px; background: #050505; }
.slot i { position: absolute; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a5a5a, #000 70%); }
.slot i:first-child { left: 6px; } .slot i:last-child { right: 6px; }
/* The chute's top edge is the middle of the slit, in front of the plate, so the print comes out of the slit itself. */
.chute { width: 270px; height: 350px; margin: -16px auto 0; overflow: hidden; position: relative; z-index: 3; padding: 0 8px; }
.chute img { width: 100%; box-shadow: 0 12px 24px rgba(0,0,0,.6); }
.develop.in .chute img { animation: slide 8s infinite cubic-bezier(.3,.6,.3,1), dev 8s infinite ease-in-out; }
@keyframes slide { 0%, 6% { transform: translateY(-105%); opacity: 1; } 30%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes dev { 0%, 28% { filter: brightness(2.3) contrast(.25) sepia(.7); } 50%, 100% { filter: none; } }

/* ---------- 3. make it yours: one print, cycling backdrop → text → gems ---------- */
.tabs { display: flex; gap: 26px; justify-content: center; margin-bottom: 18px; }
/* Buttons that jump to their step; the extra top padding (pulled back with the margin) is a bigger tap target. */
.tabs button { font-family: var(--deco); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-faint); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 12px 0 6px; margin-top: -12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .4s, border-color .4s; }
.tabs button:hover { color: var(--cream); }
.tabs button.on { color: var(--cream); border-color: var(--cream); }
.stage { position: relative; width: 300px; max-width: 100%; aspect-ratio: 534 / 660; box-shadow: 0 18px 36px rgba(0,0,0,.6); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.stage img.on { opacity: 1; }
.yours .art { flex-direction: column; align-items: center; }

@media (min-width: 900px) { .stage { width: 340px; } }

/* ---------- 4. the film shelf, in an aluminium frame like the booth ---------- */
.cabinet { width: calc(100% + 32px); margin: 0 -16px; }
.cabinet img { width: 100%; }
@media (min-width: 600px) {
  .cabinet { width: 480px; max-width: 100%; margin: 0; padding: 7px; border-radius: 4px;
    background: url(assets/brushed.png) 0 0 / 171px 85px, linear-gradient(160deg, #f4f4f2, #b9bab6 45%, #e3e3e0 70%, #a5a6a2); background-blend-mode: overlay, normal;
    box-shadow: 0 20px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7); }
}

/* ---------- 5. sign-up again + footer ---------- */
.last .copy { margin: 0 auto; }
@media (min-width: 900px) { .last .copy { text-align: center; align-items: center; } }
footer { padding: 24px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 14px; color: var(--cream-faint); }
footer img { height: 30px; width: auto; opacity: .8; }
footer a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--cream-text); }
footer a:hover { color: var(--cream); }
footer svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .strip, .develop.in .chute img { animation: none; }
  .chute img { filter: none; }
}