/* =========================================================
   Folk & Potion — film page
   full-bleed, looping, share-link landing
   ========================================================= */

:root {
  --ink:        #07060a;
  --ink-2:      #0d0b12;
  --oxblood:    #6b1f1f;
  --oxblood-hi: #8a2a2a;
  --gold:       #c8a96a;
  --gold-hi:    #e7c98a;
  --gold-deep:  #8a6f3f;
  --parchment:  #ece1c7;
  --parchment-2:#d8c9a3;
  --candle:     #ffb46b;
  --candle-2:   #ff7a3a;
  --smoke:      rgba(236, 225, 199, 0.55);

  --serif-display: 'Cinzel', serif;
  --serif-body:    'Cormorant Garamond', serif;

  /* the loop is 12 seconds, all keyframes are scaled to it */
  --loop: 12s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: var(--parchment);
  font-family: var(--serif-body);
  overflow: hidden;
}

a { color: var(--gold-hi); text-decoration: none; }
a:hover { color: var(--parchment); }

/* =========================================================
   header (minimal chrome)
   ========================================================= */
.film-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  pointer-events: none;
}
.film-header > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--parchment);
}
.brand-mark {
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(200, 169, 106, 0.5);
}
.brand-name {
  font-family: var(--serif-display);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-name .amp { color: var(--gold); margin: 0 2px; }

.film-nav {
  display: flex;
  gap: 24px;
  font-family: var(--serif-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.film-nav a {
  color: var(--parchment-2);
  transition: color .25s ease;
}
.film-nav a:hover { color: var(--gold-hi); }

@media (max-width: 600px) {
  .film-header { padding: 14px 18px; }
  .brand-name { display: none; }
}

/* =========================================================
   stage — full bleed
   ========================================================= */
.film-main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.film-stage {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 60%, #1a0f0a, #06050a 60%, #000 100%);
  display: grid;
  place-items: center;
}

/* future <video> drop-in */
.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.film-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 55%, transparent 30%, rgba(0,0,0,0.55) 75%, #000 100%);
  z-index: 4;
}

.film-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(232,201,138,.7), transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(232,201,138,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(232,201,138,.4), transparent 60%),
    radial-gradient(1px 1px at 88% 22%, rgba(232,201,138,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 70%, rgba(232,201,138,.45), transparent 60%);
  opacity: 0.5;
  animation: drift 22s linear infinite;
}
@keyframes drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 200px -120px, -160px 90px, 80px 200px, -240px -60px, 100px -180px; }
}

.film-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 25vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 58, 0.18), transparent 60%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 60%, #000);
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
   portal (animated loop)
   ========================================================= */
.film-portal {
  --size: clamp(280px, 52vmin, 580px);
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  z-index: 3;
  animation: portal-breathe 5s ease-in-out infinite;
}
@keyframes portal-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

.film-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0,0,0,0.92), rgba(0,0,0,0.78) 70%, transparent 71%),
    conic-gradient(from 0deg,
      var(--gold-deep), var(--gold-hi), var(--gold-deep),
      var(--gold), var(--gold-deep), var(--gold-hi), var(--gold-deep));
  padding: 16px;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.6),
    0 0 80px rgba(200, 169, 106, 0.28),
    0 40px 120px rgba(0,0,0,0.7);
}
.film-rim::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,180,107,0.18), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(107,31,31,0.4), transparent 50%),
    #050405;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.95);
}

.film-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,107,0.22), transparent 60%);
  filter: blur(22px);
  pointer-events: none;
  animation: glow-cycle var(--loop) ease-in-out infinite;
}
@keyframes glow-cycle {
  /* dim --> bright at the open --> hold --> dim */
  0%   { opacity: 0.35; }
  10%  { opacity: 0.45; }
  20%  { opacity: 1;    }
  60%  { opacity: 0.95; }
  80%  { opacity: 0.5;  }
  100% { opacity: 0.35; }
}

/* doors */
.film-door {
  position: absolute;
  top: 16px;
  bottom: 16px;
  width: calc(50% - 16px);
  background:
    linear-gradient(180deg, #2a1f17, #0e0a08 60%, #1a120c);
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(232, 201, 138, 0.12);
  z-index: 5;
}
.film-door::before,
.film-door::after {
  content: "";
  position: absolute;
  background: rgba(232, 201, 138, 0.18);
}
.film-door::before { left: 20%; right: 20%; top: 28%;    height: 1px; }
.film-door::after  { left: 20%; right: 20%; bottom: 28%; height: 1px; }

.film-door-l {
  left: 16px;
  border-radius: 9999px 0 0 9999px;
  transform-origin: left center;
  animation: door-l var(--loop) ease-in-out infinite;
}
.film-door-r {
  right: 16px;
  border-radius: 0 9999px 9999px 0;
  transform-origin: right center;
  animation: door-r var(--loop) ease-in-out infinite;
}
@keyframes door-l {
  0%, 12%   { transform: perspective(900px) rotateY(0deg); }
  22%, 78%  { transform: perspective(900px) rotateY(-95deg); }
  88%, 100% { transform: perspective(900px) rotateY(0deg); }
}
@keyframes door-r {
  0%, 12%   { transform: perspective(900px) rotateY(0deg); }
  22%, 78%  { transform: perspective(900px) rotateY(95deg); }
  88%, 100% { transform: perspective(900px) rotateY(0deg); }
}

/* interior */
.film-interior {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 60%, rgba(255,180,107,0.22), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(255,122,58,0.22), transparent 50%),
    #040305;
  z-index: 4;
}

/* smoke wisps when door opens */
.film-smoke {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.film-smoke span {
  position: absolute;
  bottom: 30%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(236, 225, 199, 0.18);
  filter: blur(18px);
  opacity: 0;
  animation: smoke-puff var(--loop) ease-out infinite;
}
.film-smoke span:nth-child(1) { left: 30%; animation-delay: 0s;     }
.film-smoke span:nth-child(2) { left: 50%; animation-delay: -0.4s;  }
.film-smoke span:nth-child(3) { left: 60%; animation-delay: -0.8s;  }
.film-smoke span:nth-child(4) { left: 40%; animation-delay: -1.2s;  }
@keyframes smoke-puff {
  0%, 18% { opacity: 0; transform: translateY(0) scale(0.6); }
  22%     { opacity: 0.7; transform: translateY(-20%) scale(1); }
  45%     { opacity: 0.3; transform: translateY(-80%) scale(1.6); }
  60%     { opacity: 0; transform: translateY(-110%) scale(2); }
  100%    { opacity: 0; transform: translateY(-110%) scale(2); }
}

/* arm + cup */
.film-arm {
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 62%;
  height: 68%;
  transform: translateX(-50%) translateY(120%);
  z-index: 6;
  animation: arm-extend var(--loop) cubic-bezier(.2,.7,.1,1) infinite;
}
@keyframes arm-extend {
  0%, 22%   { transform: translateX(-50%) translateY(120%); }
  35%, 75%  { transform: translateX(-50%) translateY(0%); }
  88%, 100% { transform: translateX(-50%) translateY(120%); }
}
.arm-sleeve {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 36%;
  height: 60%;
  background: linear-gradient(180deg, #1c1620, #2a1f17 60%, #14121b);
  border-radius: 18px 18px 0 0;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,0.85),
    0 -10px 30px rgba(0,0,0,0.7);
}
.arm-sleeve::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12%;
  right: 12%;
  height: 6px;
  background: var(--gold);
  border-radius: 3px;
  opacity: 0.6;
}
.arm-sleeve::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 38%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
}
.arm-hand {
  position: absolute;
  left: 50%;
  bottom: 56%;
  transform: translateX(-50%);
  width: 24%;
  height: 22%;
  background: linear-gradient(180deg, #ddb792, #b48662);
  border-radius: 40% 40% 30% 30%;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.35);
}

.cup {
  position: absolute;
  left: 50%;
  bottom: 70%;
  transform: translateX(-50%);
  width: 28%;
  height: 30%;
}
.cup-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f1e6c9, #d6c39a 50%, #b8a079);
  border-radius: 6px 6px 22px 22px;
  box-shadow:
    inset 0 -10px 16px rgba(0,0,0,0.25),
    0 10px 24px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.25);
}
.cup-rim {
  position: absolute;
  inset: 4px 4px auto 4px;
  height: 6px;
  background: #2a1206;
  border-radius: 3px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.2);
}
.cup-steam {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 80%;
}
.cup-steam span {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  background: var(--smoke);
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0;
  animation: steam 2.6s ease-in infinite;
}
.cup-steam span:nth-child(1) { left: 20%; animation-delay: 0s; }
.cup-steam span:nth-child(2) { left: 50%; animation-delay: 0.6s; }
.cup-steam span:nth-child(3) { left: 75%; animation-delay: 1.2s; }
@keyframes steam {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateY(-120%) scale(2.2); opacity: 0; }
}

/* runes */
.film-runes {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  animation: spin 60s linear infinite;
  color: rgba(232, 201, 138, 0.55);
  font-size: 14px;
  z-index: 2;
}
.film-runes span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
}
.film-runes span:nth-child(1) { transform: rotate(  0deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
.film-runes span:nth-child(2) { transform: rotate( 45deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
.film-runes span:nth-child(3) { transform: rotate( 90deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
.film-runes span:nth-child(4) { transform: rotate(135deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
.film-runes span:nth-child(5) { transform: rotate(180deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
.film-runes span:nth-child(6) { transform: rotate(225deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
.film-runes span:nth-child(7) { transform: rotate(270deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
.film-runes span:nth-child(8) { transform: rotate(315deg) translateY(calc(-1 * (var(--size)/2 + 4px))); }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================
   caption / poem
   ========================================================= */
.film-caption {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 6;
  height: 4em;
}
.caption-line {
  position: absolute;
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment);
  text-shadow: 0 4px 24px rgba(0,0,0,0.9);
  opacity: 0;
  /* total = var(--loop) (12s), 5 lines, ~2.4s each */
  animation: caption-cycle var(--loop) ease-in-out infinite;
}
.caption-line.gold { color: var(--gold-hi); font-style: italic; }

.caption-line:nth-child(1) { animation-delay: 0s;    }
.caption-line:nth-child(2) { animation-delay: -9.6s; }
.caption-line:nth-child(3) { animation-delay: -7.2s; }
.caption-line:nth-child(4) { animation-delay: -4.8s; }
.caption-line:nth-child(5) { animation-delay: -2.4s; }

@keyframes caption-cycle {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: translateY(0); }
  16%  { opacity: 1; transform: translateY(0); }
  20%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; }
}

@media (max-width: 600px) {
  .film-caption {
    top: auto;
    bottom: 32%;
    transform: none;
  }
}

/* =========================================================
   CTA + share + sound
   ========================================================= */
.film-cta {
  position: absolute;
  bottom: 56px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 18px;
  z-index: 10;
  opacity: 0;
  animation: fade-in 1.2s ease 1.6s forwards;
}
@keyframes fade-in {
  to { opacity: 1; }
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--serif-display);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--gold-deep);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
  background: transparent;
  color: var(--parchment);
}
.btn-primary {
  background: linear-gradient(180deg, var(--oxblood-hi), var(--oxblood));
  border-color: var(--oxblood-hi);
  box-shadow:
    0 0 0 1px rgba(232, 201, 138, 0.18),
    0 8px 24px rgba(107, 31, 31, 0.45);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(232, 201, 138, 0.32),
    0 16px 40px rgba(107, 31, 31, 0.6);
}
.btn-ghost {
  border-color: rgba(232, 201, 138, 0.32);
  color: var(--parchment-2);
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.25);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-hi);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .film-cta { bottom: 32px; }
}

/* share */
.film-share {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(232, 201, 138, 0.25);
  color: var(--parchment);
  font-family: var(--serif-display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.share-btn:hover {
  border-color: var(--gold);
  color: var(--gold-hi);
  transform: translateY(-1px);
}
.share-icon { color: var(--gold); }

.share-toast {
  display: inline-block;
  padding: 8px 12px;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--gold-deep);
  color: var(--gold-hi);
  font-family: var(--serif-display);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 4px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.share-toast.show {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 720px) {
  .film-share {
    top: auto;
    bottom: 130px;
    right: 50%;
    transform: translateX(50%);
  }
}

/* sound toggle */
.sound-toggle {
  position: absolute;
  top: 80px;
  right: 24px;
  z-index: 10;
  font-family: var(--serif-display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--parchment-2);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(232, 201, 138, 0.25);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  transition: color .25s ease, border-color .25s ease;
}
.sound-toggle:hover {
  color: var(--gold-hi);
  border-color: var(--gold);
}
.sound-toggle .sound-on  { display: inline; }
.sound-toggle .sound-off { display: none; }
.sound-toggle.off .sound-on  { display: none; }
.sound-toggle.off .sound-off { display: inline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .film-portal { animation: none; }
}