/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  overflow: hidden;
  background: #333;
  overscroll-behavior: none;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;

  background: #333;
  color: #fff4cf;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  -webkit-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* =========================================================
   INSTALL SCREEN
========================================================= */

.install-screen {
  position: fixed;
  inset: 0;

  overflow-y: auto;

  padding:
    max(24px, env(safe-area-inset-top))
    20px
    max(24px, env(safe-area-inset-bottom));

  background:
    radial-gradient(
      circle at 50% 10%,
      #70472f,
      #213d2e 52%,
      #14281f 100%
    );

  touch-action: pan-y;
}

.install-card {
  width: min(100%, 430px);
  margin: 5vh auto 0;

  padding: 34px 26px;

  border: 1px solid rgba(255, 238, 184, 0.3);
  border-radius: 24px;

  background: rgba(28, 43, 32, 0.94);

  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.35);

  text-align: center;
}

.install-leaves {
  margin-bottom: 12px;
  font-size: 30px;
}

.install-card h1 {
  margin: 5px 0 14px;
  font-size: 52px;
  font-weight: 400;
}

.instructions {
  margin-top: 28px;
  text-align: left;
  line-height: 1.55;
}

.instructions ol {
  padding-left: 23px;
}

.instructions li + li {
  margin-top: 9px;
}

.small {
  opacity: 0.72;
  font-size: 14px;
}

.text-button {
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #ffd987;
  text-decoration: underline;
  cursor: pointer;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience {
  position: fixed;
  inset: 0;

  display: grid;
  place-items: center;

  overflow: hidden;

  background: #333;
}

.scene {
  position: relative;

  width: min(
    100vw,
    calc(100dvh * 0.462)
  );

  height: min(
    100dvh,
    calc(100vw / 0.462)
  );

  max-width: 430px;
  max-height: 932px;

  overflow: hidden;

  isolation: isolate;

  background: #1d3c2c;

  touch-action: none;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
  .scene {
    width: 100vw;
    height: 100dvh;

    max-width: none;
    max-height: none;

    box-shadow: none;
  }
}


/* =========================================================
   PAPER GRAIN
========================================================= */

.grain {
  position: absolute;
  inset: 0;
  z-index: 100;

  pointer-events: none;

  opacity: 0.12;

  background-image:
    repeating-radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.15) 0 0.7px,
      transparent 0.8px 3px
    );

  mix-blend-mode: soft-light;
}


/* =========================================================
   OPENING
========================================================= */

.opening {
  position: absolute;
  inset: 0;

  overflow: hidden;

  background: #244532;
}


/* =========================================================
   TREE ART
========================================================= */

.tree-art {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 1;

  pointer-events: none;
}


/* =========================================================
   OPENING TEXT
========================================================= */

.opening-copy {
  position: absolute;

  z-index: 12;

  left: 7%;
  right: 7%;

  top: 67%;

  text-align: center;

  color: #ffe6a1;

  pointer-events: none;

  text-shadow:
    0 2px 2px rgba(55, 24, 10, 0.45);
}

.eyebrow {
  margin: 0 0 16px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(10px, 2.7vw, 12px);

  font-weight: 800;

  letter-spacing: 0.25em;

  line-height: 1.45;

  text-transform: uppercase;
}

.opening-copy h1 {
  margin: 0;

  font-size: clamp(52px, 14vw, 67px);

  font-weight: 400;

  line-height: 0.95;
}

.pull-copy {
  margin: 23px 0 0;

  font-size: clamp(17px, 4.5vw, 21px);
}


/* =========================================================
   PULL LEAF
========================================================= */

.pull-leaf {
  --pull-y: 0px;

  position: absolute;

  z-index: 20;

  left: 67.5%;
  top: 47.2%;

  width: clamp(73px, 21vw, 94px);
  height: clamp(86px, 25vw, 110px);

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: #ed7a30;

  cursor: grab;

  touch-action: none;

  transform:
    translate3d(
      -50%,
      var(--pull-y),
      0
    )
    rotate(31deg);

  transform-origin: 50% 95%;

  will-change: transform;
}

.pull-leaf:active {
  cursor: grabbing;
}


/* =========================================================
   PULL LEAF GLOW
========================================================= */

.pull-leaf::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 48%;

  width: 88%;
  height: 78%;

  border: 3px solid rgba(255, 222, 126, 0.95);

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    rotate(29deg);

  box-shadow:
    0 0 7px rgba(255, 223, 130, 0.95),
    0 0 16px rgba(255, 185, 74, 0.85),
    0 0 28px rgba(255, 133, 44, 0.55);

  pointer-events: none;

  animation:
    pullLeafGlow
    1.45s
    ease-in-out
    infinite;
}

.pull-leaf::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 48%;

  width: 91%;
  height: 81%;

  border: 2px solid rgba(255, 227, 147, 0.7);

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    rotate(29deg)
    scale(1);

  opacity: 0;

  pointer-events: none;

  animation:
    pullLeafRing
    1.45s
    ease-out
    infinite;
}

@keyframes pullLeafGlow {
  0%,
  100% {
    opacity: 0.72;

    box-shadow:
      0 0 5px rgba(255, 223, 130, 0.75),
      0 0 12px rgba(255, 185, 74, 0.65),
      0 0 20px rgba(255, 133, 44, 0.35);
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 9px rgba(255, 235, 170, 1),
      0 0 21px rgba(255, 190, 75, 0.95),
      0 0 38px rgba(255, 121, 35, 0.7);
  }
}

@keyframes pullLeafRing {
  0% {
    opacity: 0.8;

    transform:
      translate(-50%, -50%)
      rotate(29deg)
      scale(0.92);
  }

  65% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(29deg)
      scale(1.32);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(29deg)
      scale(1.32);
  }
}

.pull-leaf svg {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  filter:
    drop-shadow(
      0 5px 3px
      rgba(32, 17, 11, 0.35)
    );
}


/* =========================================================
   PULL HINT
========================================================= */

.pull-hint {
  position: absolute;

  z-index: 21;

  left: 66%;
  top: 45.5%;

  transform: translateX(-50%);

  color: #ffe4a1;

  font-size: 30px;

  pointer-events: none;

  text-shadow:
    0 0 6px rgba(255, 224, 142, 0.9),
    0 0 12px rgba(255, 166, 64, 0.65);

  animation:
    hintBounce
    1.2s
    ease-in-out
    infinite;
}

@keyframes hintBounce {
  0%,
  100% {
    opacity: 0.7;

    transform:
      translate3d(-50%, 0, 0);
  }

  50% {
    opacity: 1;

    transform:
      translate3d(-50%, 9px, 0);
  }
}


/* =========================================================
   FALLING ANIMATION LAYER
========================================================= */

.fall-layer {
  position: absolute;
  inset: 0;

  z-index: 30;

  overflow: hidden;

  pointer-events: none;
}

.story-fall-leaf {
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: var(--size);
  height: calc(var(--size) * 1.16);

  color: var(--leaf-color);

  opacity: 0;

  transform:
    translate3d(-50%, -50%, 0)
    rotate(var(--rotation));

  filter:
    drop-shadow(
      0 4px 2px
      rgba(40, 20, 10, 0.24)
    );

  will-change:
    transform,
    opacity;
}

.opening.is-falling .story-fall-leaf {
  animation:
    leafDrop
    var(--duration)
    cubic-bezier(.22, .72, .32, 1)
    var(--delay)
    forwards;
}

@keyframes leafDrop {
  0% {
    opacity: 1;

    transform:
      translate3d(
        -50%,
        -50%,
        0
      )
      rotate(var(--rotation));
  }

  100% {
    opacity: 1;

    transform:
      translate3d(
        calc(-50% + var(--drift)),
        calc(100dvh + 120px),
        0
      )
      rotate(
        calc(
          var(--rotation) +
          var(--spin)
        )
      );
  }
}


/* =========================================================
   RISING LEAF PILE

   IMPORTANT:
   The leaves are allowed to extend beyond the pile's
   rectangular box.

   This prevents the top and bottom edges from looking
   like they were cut with a straight line.
========================================================= */

.rise-pile {
  position: absolute;

  z-index: 40;

  left: -8%;
  right: -8%;

  bottom: -108%;

  height: 116%;

  /*
    IMPORTANT CHANGE:

    This used to be "overflow: hidden".

    That clipped every leaf exactly at the rectangular
    top and bottom of this container, creating the harsh
    horizontal lines visible in the screenshot.

    Visible lets the outside portions of those leaves
    form a natural jagged silhouette instead.
  */
  overflow: visible;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 0, 0);

  will-change:
    transform,
    opacity;
}


/*
   Only show the pile after the pull begins.
   This means the overflow does NOT cause leaves to
   appear on the initial opening screen.
*/

.opening.is-falling .rise-pile {
  visibility: visible;
  opacity: 1;

  animation:
    pileRise
    2.25s
    cubic-bezier(.22, .68, .28, 1)
    0.35s
    forwards;
}


@keyframes pileRise {
  from {
    transform:
      translate3d(0, 0, 0);
  }

  to {
    transform:
      translate3d(0, -100%, 0);
  }
}


.rise-leaf {
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: var(--size);
  height: calc(var(--size) * 1.16);

  color: var(--leaf-color);

  transform:
    translate3d(-50%, -50%, 0)
    rotate(var(--rotation))
    scale(var(--scale));

  filter:
    drop-shadow(
      0 4px 2px
      rgba(46, 24, 13, 0.26)
    );
}


/* =========================================================
   REMOVE PULL HIGHLIGHT ONCE ANIMATION STARTS
========================================================= */

.opening.is-falling .pull-leaf::before,
.opening.is-falling .pull-leaf::after {
  display: none;
}


/* =========================================================
   QUESTION PAGE
========================================================= */

.pile-view {
  position: absolute;
  inset: 0;

  z-index: 5;

  overflow: hidden;

  background: #a98550;
}

.hay-floor {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
}


/* =========================================================
   QUESTION
========================================================= */

.hidden-invitation {
  position: absolute;
  inset: 0;

  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}

.invitation-content {
  width: 94%;

  padding:
    max(26px, env(safe-area-inset-top))
    8px
    max(20px, env(safe-area-inset-bottom));

  text-align: center;

  color: #35190f;
}

.invitation-content h2 {
  margin: 0;

  font-size:
    clamp(
      43px,
      12.5vw,
      59px
    );

  font-weight: 800;

  line-height: 1.17;

  letter-spacing: 0.025em;

  text-shadow:
    0 2px 0 #f4d68b,
    2px 0 0 #f4d68b,
    -2px 0 0 #f4d68b,
    0 -2px 0 #f4d68b,
    0 4px 5px rgba(68, 35, 15, 0.3);
}

.invitation-content h2 em {
  font-style: normal;

  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}


/* =========================================================
   YES / NO
========================================================= */

.answer-row {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(45px, 15vw, 80px);

  margin-top:
    clamp(
      55px,
      8vh,
      85px
    );

  pointer-events: auto;
}

.answer-leaf {
  position: relative;

  width: 78px;
  height: 92px;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  color: #dc6d2e;

  filter:
    drop-shadow(
      0 4px 2px
      rgba(66, 34, 16, 0.3)
    );
}

.answer-leaf.no {
  color: #a95832;
  transform: rotate(8deg);
}

.answer-leaf.yes {
  transform: rotate(-7deg);
}

.answer-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
}

.answer-leaf span {
  position: absolute;

  left: 50%;
  top: 52%;

  transform:
    translate(-50%, -50%);

  color: #fff0cc;

  font-size: 21px;
  font-weight: 700;

  text-shadow:
    0 1px 2px #582b18;

  pointer-events: none;
}


/* =========================================================
   MOVABLE LEAF FLOOR
========================================================= */

.leaf-floor {
  position: absolute;
  inset: 0;

  z-index: 10;

  overflow: hidden;

  touch-action: none;

  contain:
    layout
    paint
    size;
}

.floor-leaf {
  position: absolute;

  left: 0;
  top: 0;

  display: block;

  color: var(--color);

  touch-action: none;

  cursor: grab;

  filter:
    drop-shadow(
      0 4px 2px
      rgba(52, 27, 14, 0.26)
    );

  will-change: transform;
}

.floor-leaf:active {
  cursor: grabbing;
}


/* =========================================================
   QUESTION PROMPT
========================================================= */

.leaf-prompt {
  position: absolute;
  inset: 0;

  z-index: 5000;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(28, 20, 13, 0.48);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.leaf-prompt-card {
  width: min(100%, 330px);

  padding: 29px 24px 25px;

  border:
    2px solid
    rgba(255, 224, 153, 0.5);

  border-radius: 22px;

  background:
    rgba(45, 68, 47, 0.97);

  color: #ffe7a7;

  text-align: center;

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.35);
}

.prompt-leaves {
  margin-bottom: 7px;
  font-size: 30px;
}

.leaf-prompt-card h2 {
  margin:
    4px 0
    10px;

  font-size: 27px;
  line-height: 1.1;
}

.leaf-prompt-card p {
  margin:
    0 0
    20px;

  font-size: 17px;
}

.leaf-prompt-card button {
  min-width: 110px;

  padding: 11px 22px;

  border:
    1px solid
    #f3c66d;

  border-radius: 999px;

  background:
    #d96d2f;

  color: #fff5d9;

  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   ANSWER PAGE
========================================================= */

.answer-view {
  position: absolute;
  inset: 0;

  z-index: 20;

  display: grid;
  place-items: center;

  padding: 30px;

  background:
    radial-gradient(
      circle at 50% 28%,
      #a45f3c,
      #294a35 48%,
      #173324 100%
    );
}

.answer-card {
  width: min(100%, 350px);

  text-align: center;

  color: #ffe5a2;
}

.answer-card h2 {
  margin:
    10px 0
    30px;

  font-size:
    clamp(
      38px,
      10vw,
      52px
    );

  line-height: 1.05;
}

.replay-button {
  padding: 12px 22px;

  border:
    1px solid
    rgba(255, 227, 161, 0.6);

  border-radius: 999px;

  background:
    rgba(38, 58, 42, 0.88);

  color: #ffe6a4;

  cursor: pointer;
}


/* =========================================================
   FLASH
========================================================= */

.flash {
  position: absolute;
  inset: 0;

  z-index: 9000;

  background: #f5d786;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 220ms ease;
}

.flash.active {
  opacity: 1;
}


/* =========================================================
   FALL STATE
========================================================= */

.opening.is-falling .opening-copy,
.opening.is-falling .pull-hint {
  animation:
    fadeOpeningText
    500ms
    ease
    forwards;
}

.opening.is-falling .tree-art {
  animation:
    fadeTree
    1.9s
    ease
    0.45s
    forwards;
}

.opening.is-falling .pull-leaf {
  pointer-events: none;
}

@keyframes fadeOpeningText {
  to {
    opacity: 0;
  }
}

@keyframes fadeTree {
  0% {
    opacity: 1;
  }

  65% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  .pull-hint {
    animation: none;
  }

  .pull-leaf::before {
    animation: none;
  }

  .pull-leaf::after {
    animation: none;
    display: none;
  }

  .opening.is-falling .story-fall-leaf {
    animation-duration: 300ms;
    animation-delay: 0ms;
  }

  .opening.is-falling .rise-pile {
    animation-duration: 450ms;
    animation-delay: 0ms;
  }

  .opening.is-falling .tree-art,
  .opening.is-falling .opening-copy,
  .opening.is-falling .pull-hint {
    animation-duration: 250ms;
    animation-delay: 0ms;
  }

}