/* ============ 100 ft. TIMES — minimal ============ */

@font-face {
  font-family: "Henrietta Cond";
  src: url("assets/henrietta-cond.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root { --ink: #131313; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background-color: #faf8f3;
  background-image: url("assets/indiranagar-map.svg?v=2");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}
body::before {                 /* subtle paper grain */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {                  /* soft warm light from top */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,244,220,.55), transparent 60%),
    radial-gradient(140% 110% at 50% 50%, transparent 62%, rgba(120,100,70,.07));
}

.page {
  height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px 0;
  overflow: hidden;
}

/* masthead */
.brand-cluster {
  position: relative;
  z-index: 6;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  margin-bottom: 9vh;
}

.masthead {
  position: relative;
  z-index: 6;
  width: 139.86px;
  height: 26px;
  flex: 0 0 auto;
  background: var(--ink);
  -webkit-mask: url("assets/100ft-logo.svg") center / contain no-repeat;
  mask: url("assets/100ft-logo.svg") center / contain no-repeat;
  margin-bottom: 0;
  animation: fade .8s ease both;
}

/* headline */
.headline {
  position: relative;
  z-index: 6;
  font-family: "Henrietta Cond", Georgia, serif;
  font-weight: 700;
  font-synthesis: weight;
  font-size: clamp(40px, calc(2.1vw + 24px), 72px);
  line-height: 1.02;
  letter-spacing: .002em;
  color: var(--ink);
  margin-bottom: 2.5vh;
  animation: rise .9s .08s cubic-bezier(.22,1,.36,1) both;
}

/* ============ click word stickers ============ */
.blossom-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.word-particle {
  position: absolute;
  width: 0;
  height: 0;
  will-change: transform, opacity;
  animation: word-flight var(--duration) cubic-bezier(.16,.78,.3,1) var(--delay) forwards;
}

.word-sticker {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  padding: .25em;
  border: 0;
  background: transparent;
  color: #050505;
  font-family: "Henrietta Cond", Georgia, serif;
  font-size: var(--font-size);
  font-weight: 700;
  font-synthesis: weight;
  letter-spacing: -.01em;
  line-height: .92;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-text-stroke: 9px #faf8f3;
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .2));
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: word-wobble 420ms ease-in-out infinite alternate;
}

@keyframes word-flight {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--start-rotation)) scale(.3);
  }
  10% { opacity: 1; }
  42% {
    opacity: 1;
    transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--mid-rotation)) scale(1);
  }
  70% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--end-rotation)) scale(.9);
  }
}

@keyframes word-wobble {
  from { transform: translate(-50%, -50%) rotate(-1.5deg); }
  to { transform: translate(-50%, -50%) rotate(1.5deg); }
}

/* ============ ambient auto track ============ */
.auto-track {
  --auto-size: clamp(74px, 7.2vw, 94px);
  --auto-right: clamp(14px, 3vw, 40px);
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  height: calc(clamp(64px, 9svh, 84px) + env(safe-area-inset-bottom));
  overflow: visible;
  pointer-events: none;
}

.auto-track-line {
  position: absolute;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  height: clamp(6px, .7vw, 9px);
  background: #090909;
  box-shadow: 0 -2px 0 rgba(0, 0, 0, .12);
}

.auto-button {
  position: absolute;
  right: var(--auto-right);
  bottom: calc(5px + env(safe-area-inset-bottom));
  z-index: 3;
  width: var(--auto-size);
  aspect-ratio: 128 / 92;
  padding: 0;
  border: 0;
  border-radius: 14px;
  outline: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.auto-button:focus-visible {
  outline: 3px solid #e3a640;
  outline-offset: 4px;
}

.auto-click-hint {
  position: absolute;
  top: -28px;
  left: 50%;
  z-index: 2;
  padding: 5px 8px 4px;
  border: 2px solid #15130f;
  border-radius: 4px;
  background: #fff8e9;
  color: #15130f;
  font: 700 clamp(8px, .7vw, 10px)/1 "Courier New", monospace;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(21, 19, 15, .22);
  transform: translateX(-50%) rotate(-1deg);
  transform-origin: 50% 100%;
  animation: auto-click-hint-pulse 1.7s ease-in-out infinite;
  transition: opacity .16s ease, transform .16s ease;
}

.auto-click-hint::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #15130f;
  border-bottom: 2px solid #15130f;
  background: #fff8e9;
  transform: translate(-50%, -4px) rotate(45deg);
}

.auto-button:is(.is-driving, .is-listening, .is-resetting, .is-unavailable) .auto-click-hint {
  opacity: 0;
  animation: none;
  transform: translateX(-50%) translateY(4px) rotate(-1deg);
}

.auto-button:not(:disabled):not(.is-driving):hover .auto-rickshaw {
  transform: translateY(-3px) rotate(-.6deg);
}

.auto-button:not(:disabled):not(.is-driving):active .auto-rickshaw {
  transform: translateY(0) scale(.97);
}

.auto-button:disabled {
  cursor: default;
}

.auto-button.is-driving {
  animation: auto-crossing 10s linear both;
}

.auto-button.is-resetting {
  visibility: hidden;
  animation: none;
}

.auto-button.is-unavailable {
  opacity: .48;
  filter: grayscale(.72);
}

.auto-rickshaw {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.27));
  transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s ease;
}

.auto-rickshaw .cls-0 { fill: #444143; }
.auto-rickshaw .cls-1 { fill: #969597; }
.auto-rickshaw .cls-2 { fill: #d2d3d4; }
.auto-rickshaw .cls-3 { fill: #be6b0f; }
.auto-rickshaw .cls-4 { fill: #086038; }
.auto-rickshaw .cls-5 { fill: #0a341c; }
.auto-rickshaw .cls-6 { fill: #2ba8e0; }
.auto-rickshaw .cls-7 { fill: #9edbf4; }
.auto-rickshaw .cls-8 { fill: #3f7b57; }
.auto-rickshaw .cls-9 { fill: none; }
.auto-rickshaw .cls-10 { fill: #727072; }
.auto-rickshaw .cls-11 { fill: #a6a3a6; }
.auto-rickshaw .cls-12 { fill: #f38e15; }
.auto-rickshaw .cls-13 { fill: #ced1ce; }
.auto-rickshaw .cls-14 { fill: #bcbecf; }
.auto-rickshaw .cls-15 { fill: #bbbcbd; }
.auto-rickshaw .cls-16 { fill: #fccb83; }
.auto-rickshaw .cls-17 { fill: #faad3b; }
.auto-rickshaw .cls-18 { fill: #ed3834; }
.auto-rickshaw .cls-19 { fill: #db2327; }
.auto-rickshaw .cls-20 { fill: #990e0e; }
.auto-rickshaw .cls-21 { fill: #b51b1b; }
.auto-rickshaw .cls-22 { fill: none; stroke: #330c0c; stroke-width: 0; stroke-linecap: round; stroke-linejoin: round; }
.auto-rickshaw .cls-23 { fill: #800404; }
.auto-rickshaw .cls-24 { fill: #f7931e; }
.auto-rickshaw .cls-25 { fill: #fab568; }
.auto-rickshaw .cls-26 { fill: #f26a73; }
.auto-rickshaw .cls-27 { fill: #74cfef; }
.auto-rickshaw .cls-28 { fill: #f9aa49; }
.auto-rickshaw .cls-29 { fill: #282625; }
.auto-rickshaw .cls-30 { fill: #191717; }
.auto-rickshaw .cls-31 { fill: #857f7e; }
.auto-rickshaw .cls-32 { fill: #cac9c9; }
.auto-rickshaw .cls-33 { fill: #c66913; }
.auto-rickshaw .cls-34 { fill: #b7b7b7; }
.auto-rickshaw .cls-35 { fill: none; stroke: #aba8a8; stroke-width: .1886; stroke-miterlimit: 10; }
.auto-rickshaw .cls-36 { fill: #cdcccc; }
.auto-rickshaw .cls-37 { fill: #686664; }
.auto-rickshaw .cls-38 { fill: #f3d0ae; }
.auto-rickshaw .cls-39 { fill: #ab4335; }
.auto-rickshaw .cls-40 { fill: #f36c69; }
.auto-rickshaw .cls-41 { fill: #bababa; }
.auto-rickshaw .cls-42 { fill: #aeacac; }
.auto-rickshaw .cls-43 { fill: #c4c4c4; }
.auto-rickshaw .cls-44 { fill: #949494; }
.auto-rickshaw .cls-45 { fill: #aaa8a8; }
.auto-rickshaw .cls-46 { fill: #cdcdcd; }

.auto-button:not(:disabled):hover .auto-rickshaw {
  filter: drop-shadow(0 9px 4px rgba(0,0,0,.25));
}

.auto-wheel {
  transform-box: view-box;
  will-change: transform;
}

.auto-wheel--front {
  transform-origin: 10.4px 96.7px;
}

.auto-wheel--rear {
  transform-origin: 100px 94.6px;
}

.auto-headlamp-bulb {
  transform-box: fill-box;
  transform-origin: center;
}

.auto-button.is-driving .auto-wheel {
  animation: auto-wheel-spin .46s linear infinite;
}

.auto-button.is-listening .auto-headlamp-bulb {
  animation: auto-headlamp-blink .72s steps(1, end) infinite;
}

@keyframes auto-crossing {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-100vw + var(--auto-right) - 12px), 0, 0); }
}

@keyframes auto-wheel-spin {
  to { transform: rotate(-360deg); }
}

@keyframes auto-headlamp-blink {
  0%, 46% {
    opacity: 1;
    filter: drop-shadow(-2px 0 2px rgba(255, 210, 90, .92));
  }
  47%, 100% {
    opacity: .34;
    filter: none;
  }
}

@keyframes auto-click-hint-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
  50% { transform: translateX(-50%) translateY(-3px) rotate(1deg); }
}

.map-attribution {
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom));
  left: 10px;
  z-index: 10;
  color: rgba(19, 19, 19, .48);
  font-family: "Averia Serif Libre", Georgia, serif;
  font-size: 8px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}

.map-attribution:hover {
  color: #131313;
  text-decoration: underline;
}

.map-attribution:focus-visible {
  outline: 2px solid #131313;
  outline-offset: 2px;
  color: #131313;
}

/* sub */
.sub {
  font-size: clamp(15px, 1.35vw, 17.5px);
  line-height: 1.6;
  max-width: 44ch;
  color: #1c1c1c;
  margin-bottom: 3vh;
  animation: rise .9s .16s cubic-bezier(.22,1,.36,1) both;
}

.sub-cta {
  display: block;
  white-space: nowrap;
}

/* form */
.signup {
  position: relative;
  display: flex;
  gap: 10px;
  animation: rise .9s .24s cubic-bezier(.22,1,.36,1) both;
}
.signup input {
  width: min(300px, 58vw);
  height: 42px;
  background: #eceae4;
  border: 1px solid transparent;
  color: #111;
  font-family: "Averia Serif Libre", Georgia, serif;
  font-size: 14px;
  padding: 0 14px;
  outline: none;
  transition: background .2s, border-color .2s;
}
.signup input::placeholder { color: #8a8a8a; }
.signup input:focus { background: #e4e4e4; border-color: #bbb; }
.signup button {
  height: 42px;
  background: #000;
  color: #fff;
  border: none;
  font-family: "Averia Serif Libre", Georgia, serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 0 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}
.signup button:hover { background: #222; transform: translateY(-1px); }
.signup button:active { transform: translateY(0); }
.signup button.done { background: #0b7a3e; }
.signup button:disabled { cursor: wait; opacity: .76; transform: none; }
.signup button.done:disabled { cursor: default; opacity: 1; }

.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-status {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-height: 1em;
  color: #57524a;
  font-family: "Averia Serif Libre", Georgia, serif;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}

/* paper */
.paper {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: min(820px, 92vw);
  margin-top: clamp(58px, 8vh, 82px);
  isolation: isolate;
  transform: rotate(-.45deg);
  animation: paper-up 1.4s .3s cubic-bezier(.22,1,.36,1) both;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid rgba(74, 62, 44, .18);
  background: #fff;
  box-shadow: 0 13px 24px rgba(55, 43, 27, .12);
}

.paper::before {
  transform: translate(-10px, 8px) rotate(-1.1deg);
}

.paper::after {
  transform: translate(9px, 5px) rotate(.75deg);
}

.paper-sheet {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(62, 51, 36, .2);
  background: #fff;
  box-shadow: 0 18px 34px rgba(49, 37, 23, .22), 0 3px 7px rgba(49, 37, 23, .16);
}

.paper-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.48'/%3E%3C/svg%3E");
}

.paper-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, rgba(74,58,34,.08), transparent 2.4%, transparent 97.6%, rgba(74,58,34,.1)),
    linear-gradient(90deg, transparent 48.8%, rgba(81,66,43,.09) 49.8%, rgba(255,255,255,.18) 50.2%, transparent 51.2%),
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 9%, transparent 92%, rgba(67,51,30,.08));
}

@keyframes paper-up {
  from { opacity: 0; transform: translateY(110px) rotate(.6deg) scale(.98); }
  to   { opacity: 1; transform: translateY(0) rotate(-.45deg) scale(1); }
}

.paper img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* animations */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .page { padding: clamp(48px, 7vh, 62px) 16px 0; }
  .brand-cluster { margin-bottom: clamp(44px, 7.5vh, 64px); }
  .auto-track { --auto-size: clamp(69px, 20vw, 83px); --auto-right: clamp(12px, 4vw, 20px); }
  .masthead { width: clamp(104px, 30vw, 118px); height: 22px; margin-bottom: 0; }
  .headline { font-size: clamp(23px, 7.5vw, 32px); line-height: 1.02; margin-bottom: clamp(18px, 2.5vh, 24px); white-space: nowrap; }
  .sub { font-size: clamp(12px, 3.4vw, 14px); line-height: 1.52; max-width: 38ch; margin-bottom: clamp(22px, 3.5vh, 30px); }
  .signup { flex-direction: row; align-items: stretch; width: min(360px, 100%); gap: 8px; }
  .signup input { flex: 1 1 auto; min-width: 0; width: auto; height: 44px; padding: 0 11px; font-size: 13px; }
  .signup button { flex: 0 0 auto; height: 44px; padding: 0 12px; font-size: 9.25px; letter-spacing: .11em; }
  .paper { width: 94vw; margin-top: clamp(68px, 12vh, 108px); transform: rotate(-.35deg); }
  .paper { animation: paper-up-m 1.4s .3s cubic-bezier(.22,1,.36,1) both; }
}

@media (max-width: 340px) {
  .page { padding-inline: 12px; }
  .headline { font-size: 7.25vw; }
  .signup { gap: 6px; }
  .signup button { padding-inline: 9px; font-size: 8.5px; }
}

@media (max-height: 650px) {
  .page { padding-top: 24px; }
  .auto-track { --auto-size: 69px; }
  .brand-cluster { margin-bottom: clamp(16px, 4vh, 26px); }
  .masthead { width: 112px; height: 21px; margin-bottom: 0; }
  .headline { font-size: clamp(28px, calc(1.6vw + 19px), 48px); margin-bottom: 10px; white-space: nowrap; }
  .sub { font-size: 13.5px; line-height: 1.45; max-width: 44ch; margin-bottom: 14px; }
  .signup input,
  .signup button { height: 38px; }
  .paper { margin-top: clamp(24px, 5vh, 34px); }
}
@keyframes paper-up-m {
  from { opacity: 0; transform: translateY(76px) rotate(.5deg) scale(.98); }
  to   { opacity: 1; transform: translateY(0) rotate(-.35deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
  .blossom-layer { display: none; }
  .auto-click-hint { animation: none !important; }
  .auto-button.is-driving .auto-wheel { animation: none !important; }
  .auto-button.is-listening .auto-headlamp-bulb {
    animation: none !important;
    opacity: 1;
    filter: drop-shadow(-2px 0 2px rgba(255, 210, 90, .92));
  }
}