Map 2

Journey Map

The path is narrow.

Follow the markers

🔒✓

0 of 5 explored

(function(){
  if (!window.matchMedia || !window.matchMedia('(pointer:fine)').matches) return;

var st = document.createElement('style');
  st.textContent = '@media(pointer:fine){*{cursor:none !important;}}';
  document.head.appendChild(st);

var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:2147483646;';
  document.body.appendChild(canvas);

function resize(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resize();
  window.addEventListener('resize', resize);

var mouse = { x: -999, y: -999 };
  var pos = { x: -999, y: -999 };
  var onHot = false;
  var seen = false;

document.addEventListener('mousemove', function(e){
    if (!seen) {
      pos.x = e.clientX;
      pos.y = e.clientY;
      seen = true;
    }
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    var t = e.target;
    onHot = !!(t && t.closest && (
      t.closest('a,button,[onclick]') ||
      (t.getAttribute && t.getAttribute('role') === 'button')
    ));
  }, true);

var TRAIL = 55, trail = [];
  var DUST = 6, dust = [];
  for (var i = 0; i < DUST; i++) {
    dust.push({
      x: -999, y: -999, vx: 0, vy: 0,
      ox: (Math.random() - 0.5) * 90,
      oy: (Math.random() - 0.5) * 90,
      phase: Math.random() * Math.PI * 2,
      speed: 0.28 + Math.random() * 0.38,
      r: 0.9 + Math.random() * 1.1,
      glow: 5 + Math.random() * 7
    });
  }

var rip = document.createElement('style');
  rip.textContent = '@keyframes _arip{0%{width:0;height:0;opacity:1}100%{width:160px;height:160px;opacity:0}}';
  document.head.appendChild(rip);

document.addEventListener('click', function(e){
    var r = document.createElement('div');
    r.style.cssText = 'position:fixed;left:' + e.clientX + 'px;top:' + e.clientY + 'px;width:0;height:0;border-radius:50%;border:1px solid rgba(201,168,76,.6);transform:translate(-50%,-50%);pointer-events:none;z-index:2147483645;animation:_arip .75s ease forwards;';
    document.body.appendChild(r);
    setTimeout(function(){
      r.remove();
    }, 800);
  }, true);

var t = 0;
  function loop(){
    t += 0.038;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

pos.x += (mouse.x - pos.x) * 0.38;
    pos.y += (mouse.y - pos.y) * 0.38;

if (mouse.x > 0) {
      trail.push({ x: pos.x, y: pos.y });
      if (trail.length > TRAIL) trail.shift();
    }

for (var i = 0; i < trail.length; i++) {
      var p = trail[i], prog = i / trail.length, ease = prog * prog,
          a = ease * 0.55, r = 0.4 + prog * 2.2,
          flick = 0.65 + 0.35 * Math.sin(t * 4.5 + i * 0.3);
      var g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r * 4);
      g.addColorStop(0, 'rgba(201,168,76,' + (a * flick * 0.75) + ')');
      g.addColorStop(0.5, 'rgba(150,120,50,' + (a * flick * 0.2) + ')');
      g.addColorStop(1, 'rgba(90,70,30,0)');
      ctx.beginPath();
      ctx.arc(p.x, p.y, r * 4, 0, Math.PI * 2);
      ctx.fillStyle = g;
      ctx.fill();
      if (prog > 0.25) {
        ctx.beginPath();
        ctx.arc(p.x, p.y, r * 0.32, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(245,237,224,' + (a * 0.75 * flick) + ')';
        ctx.fill();
      }
    }

for (var i = 0; i < dust.length; i++) {
      var b = dust[i];
      if (mouse.x < 0) continue;
      var dtx = pos.x + b.ox + Math.sin(t * b.speed + b.phase) * 32,
          dty = pos.y + b.oy + Math.cos(t * b.speed * 0.75 + b.phase) * 26;
      b.vx += (dtx - b.x) * 0.06;
      b.vy += (dty - b.y) * 0.06;
      b.vx *= 0.82;
      b.vy *= 0.82;
      b.x += b.vx;
      b.y += b.vy;
      var fl = 0.2 + 0.8 * Math.abs(Math.sin(t * 3.2 + b.phase));
      var gr = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.glow);
      gr.addColorStop(0, 'rgba(201,168,76,' + (0.55 * fl) + ')');
      gr.addColorStop(0.5, 'rgba(150,120,50,' + (0.18 * fl) + ')');
      gr.addColorStop(1, 'rgba(90,70,30,0)');
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.glow, 0, Math.PI * 2);
      ctx.fillStyle = gr;
      ctx.fill();
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(245,237,224,' + (0.9 * fl) + ')';
      ctx.fill();
    }

if (mouse.x > 0) {
      var pulse = 0.92 + 0.08 * Math.sin(t * 3.2),
          R = (onHot ? 38 : 26) * pulse;
      var gf = ctx.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, R);
      gf.addColorStop(0, 'rgba(201,168,76,' + (onHot ? 0.85 : 0.72) + ')');
      gf.addColorStop(0.18, 'rgba(160,130,55,0.32)');
      gf.addColorStop(0.55, 'rgba(110,90,40,0.08)');
      gf.addColorStop(1, 'rgba(70,55,25,0)');
      ctx.beginPath();
      ctx.arc(pos.x, pos.y, R, 0, Math.PI * 2);
      ctx.fillStyle = gf;
      ctx.fill();

var ringR = (onHot ? 19 : 14) * pulse;
      ctx.beginPath();
      ctx.arc(pos.x, pos.y, ringR, 0, Math.PI * 2);
      ctx.strokeStyle = 'rgba(240,208,128,' + (onHot ? 0.55 : 0.35) + ')';
      ctx.lineWidth = 0.9;
      ctx.stroke();

ctx.beginPath();
      ctx.arc(pos.x, pos.y, 2.8 * pulse, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(245,239,228,0.96)';
      ctx.fill();

ctx.beginPath();
      ctx.arc(pos.x, pos.y, 1.1, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255,252,248,1)';
      ctx.fill();
    }

requestAnimationFrame(loop);
  }
 loop();
})();

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>The Bluff of Panic</title> <link href="https://bunny.net" rel="stylesheet"> <style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #0a0806;
    color: #f5eddc;
    font-family: 'EB Garamond', serif;
    -webkit-tap-highlight-color: transparent;
  }

.bg {
    position: fixed; inset: -50px; z-index: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: opacity 1.2s ease;
  }
  .bg-1 { background-image: url('https://static.tildacdn.net/tild6666-3434-4631-b231-646166336539/Picture8.png'); }
  .bg-2 {
    background-image: url('https://static.tildacdn.net/tild6465-3633-4138-b739-363663346635/noroot.png');
    opacity: 0;
  }

.vignette {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none;
    transition: background 1.2s ease;
  }
  .vignette.scene-1 {
    background: radial-gradient(circle, transparent 30%, rgba(0,0,0,0.5) 100%);
  }
  .vignette.scene-2 {
    background: radial-gradient(circle, transparent 10%, rgba(0,0,0,0.8) 100%);
  }

.scene-location {
    position: fixed; inset: 0; z-index: 20;
    display: flex; align-items: stretch;
    transition: opacity 0.8s ease;
  }
  .scene-location.hidden { opacity: 0; pointer-events: none; }

.loc-label {
    position: absolute;
    left: 10%; top: 60%;
    display: inline-flex; flex-direction: column;
    pointer-events: none; z-index: 25;
  }
  .loc-eyebrow {
    font-family: 'Cinzel', serif; font-size: 0.65rem;
    letter-spacing: 0.5em; color: rgba(201,168,76,0.9);
    text-transform: uppercase; margin-bottom: 0.5em;
    opacity: 0; transform: translateY(10px);
    animation: fadein 1s ease-out 0.5s forwards;
  }
  .loc-name {
    font-family: 'Cinzel', serif; font-weight: 600;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    letter-spacing: 0.15em; color: #f5ede0;
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(201,168,76,0.3);
    margin-bottom: 0.8em;
    opacity: 0; transform: translateY(15px);
    animation: fadein 1s ease-out 0.8s forwards;
  }
  .loc-rule {
    width: 0; height: 1px;
    background: linear-gradient(to right, #c9a84c, transparent);
    animation: ruleGrow1 1.2s cubic-bezier(0.22,1,0.36,1) 1.5s forwards;
  }
  @keyframes ruleGrow1 { to { width: 120px; } }

.crosshair-wrap {
    position: absolute; right: 15%; top: 50%;
    transform: translateY(-50%);
    opacity: 0; z-index: 30;
    display: flex; flex-direction: column; align-items: center;
    animation: fadein 1.2s cubic-bezier(0.22,1,0.36,1) 1s forwards;
  }
  .crosshair-btn {
    position: relative;
    display: block; width: 130px; height: 130px;
    cursor: pointer; background: none; border: none; padding: 0;
    transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
  }
  .crosshair-btn:hover { transform: scale(1.08); }
  .crosshair-btn svg { width: 100%; height: 100%; }
  .ch-outer-ring {
    animation: spinRing 18s linear infinite;
    transform-origin: 50% 50%;
    transform-box: fill-box;
  }
  .ch-inner-ring {
    animation: spinRing 12s linear infinite reverse;
    transform-origin: 50% 50%;
    transform-box: fill-box;
  }
  .ch-pulse-ring {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: pulseRing 2.6s ease-out infinite;
  }
  @keyframes spinRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes pulseRing {
    0%   { opacity: 0.7; transform: scale(0.9); }
    70%  { opacity: 0; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(1.5); }
  }
  .crosshair-btn svg {
    filter: drop-shadow(0 0 8px rgba(201,168,76,0.35));
    animation: glowBreath 3s ease-in-out infinite;
  }
  @keyframes glowBreath {
    0%,100% { filter: drop-shadow(0 0 8px rgba(201,168,76,0.3)) drop-shadow(0 0 25px rgba(201,168,76,0.1)); }
    50%      { filter: drop-shadow(0 0 18px rgba(201,168,76,0.75)) drop-shadow(0 0 50px rgba(201,168,76,0.3)); }
  }
  .crosshair-btn:hover svg {
    filter: drop-shadow(0 0 24px rgba(201,168,76,1)) drop-shadow(0 0 60px rgba(201,168,76,0.5));
    animation: none;
  }

.scene-watch {
    position: fixed; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.8s ease 0.4s;
  }
  .scene-watch.visible { opacity: 1; pointer-events: auto; }

.lbtn {
    display: inline-flex; flex-direction: column; align-items: center;
    cursor: pointer; background: none; border: none;
  }
  .lbtn svg {
    width: clamp(220px, 45vw, 360px); height: auto; overflow: visible;
    filter: drop-shadow(0 0 15px rgba(20,160,220,0.3));
    animation: lpulse 3.5s ease-in-out infinite;
  }
  @keyframes lpulse {
    0%,100% { filter: drop-shadow(0 8px 30px rgba(20,160,220,0.4)); }
    50%      { filter: drop-shadow(0 14px 60px rgba(20,190,240,0.8)); }
  }
  .lbtn-label {
    font-family: 'Cinzel', serif; font-size: 1.2rem;
    letter-spacing: 0.6em; color: rgba(201,168,76,0.7);
    text-transform: uppercase; margin-top: 1.5em;
    transition: 0.4s;
  }
  .lbtn:hover .lbtn-label { color: #c9a84c; }

.back-btn-wrap {
    position: fixed; bottom: 40px; right: 50px; z-index: 100;
    opacity: 0; pointer-events: none;
    transition: opacity 0.6s ease 0.6s;
  }
  .back-btn-wrap.visible { opacity: 1; pointer-events: auto; }

.back-btn {
    display: flex; align-items: center; gap: 15px;
    font-family: 'Cinzel', serif; font-size: 1.3rem;
    color: #ffffff !important;
    text-decoration: none;
    letter-spacing: 0.4em; text-transform: uppercase;
    transition: 0.4s ease;
  }

.back-btn::before {
    content: ''; width: 30px; height: 1px;
    background: #ffffff !important;
    transition: 0.4s;
  }

.back-btn:hover { color: #c9a84c !important; transform: translateX(-10px); }
  .back-btn:hover::before { width: 50px; background: #c9a84c !important; }

.lpop-ov {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,2,5,0.92); backdrop-filter: blur(15px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.5s ease;
  }
  .lpop-ov.open { opacity: 1; pointer-events: auto; }
  .lpop-box {
    position: relative; width: 96vw; height: 92vh; max-width: 1600px;
    background: #02060c; border: 1px solid rgba(201,168,76,0.2);
    display: flex; overflow: hidden;
  }
  .lpop-vid { flex: 0 0 65%; background: #000; display: flex; align-items: center; }
  .vid-container { width: 100%; position: relative; padding-bottom: 56.25%; }
  .vid-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
  .lpop-txt { flex: 1; padding: 4rem 3rem; overflow-y: auto; border-left: 1px solid rgba(201,168,76,0.1); }
  .lp-hl { font-family: 'Cinzel', serif; font-size: 1.8rem; color: #c9a84c; letter-spacing: 0.3em; margin-bottom: 1rem; text-transform: uppercase; }
  .lp-intro { font-style: italic; color: rgba(245,237,220,0.5); margin-bottom: 2em; line-height: 1.7; }
  .lp-rule { height: 1px; background: linear-gradient(to right, rgba(201,168,76,0.4), transparent); margin-bottom: 2em; }
  .lp-stitle { font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.4em; color: #c9a84c; margin: 2em 0 1em; text-transform: uppercase; opacity: 0.8; }
  .lp-row { display: flex; gap: 1.2em; margin-bottom: 1em; align-items: flex-start; }
  .lp-sq { width: 9px; height: 9px; border: 1px solid #c9a84c; margin-top: 5px; flex-shrink: 0; }
  .lp-t { color: rgba(245,237,220,0.8); line-height: 1.6; font-size: 1.05rem; }
  .lpop-close {
    position: absolute; top: 25px; right: 35px; z-index: 1000;
    font-family: 'Cinzel', serif; color: #c9a84c;
    cursor: pointer; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem;
  }

@keyframes fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

@media (max-width: 600px) and (orientation: portrait) {
    .loc-label {
      left: 0; right: 0; margin: 0 auto;
      top: 25%; text-align: center; align-items: center; width: 100%;
    }
    .loc-rule { margin: 0 auto; background: linear-gradient(to right, transparent, #c9a84c, transparent); }
    @keyframes ruleGrow1 { to { width: 60%; } }
    .crosshair-wrap {
      right: 0; left: 0; margin: 0 auto;
      top: auto; bottom: 15%; transform: translateY(0);
      display: flex; justify-content: center;
    }
    .crosshair-btn { width: 100px; height: 100px; }
    .back-btn-wrap { right: 25px; bottom: 30px; }
    .back-btn { font-size: 0.7rem; }
  }

@media (max-height: 500px) {
    .loc-label { top: 15% !important; left: 5% !important; align-items: flex-start; }
    .loc-name { font-size: 1.1rem; margin-bottom: 0.3em; }
    .loc-eyebrow { font-size: 0.55rem; }
    .crosshair-wrap { top: 50% !important; right: 8% !important; left: auto !important; transform: translateY(-50%) !important; }
    .crosshair-btn { width: 70px; height: 70px; }
  }

@media (max-width: 1024px) {
    .lpop-box { flex-direction: column; overflow-y: auto; }
    .lpop-vid { flex: none; width: 100%; }
    .lpop-txt { flex: none; width: 100%; border-left: none; padding: 2.5rem 1.5rem; overflow-y: visible; }
    .lpop-close { position: fixed; top: 20px; right: 20px; background: rgba(0,0,0,0.7); padding: 5px 10px; border-radius: 4px; }
  }
</style> </head> <body> <div class="bg bg-1" id="bg1"></div> <div class="bg bg-2" id="bg2"></div> <div class="vignette scene-1" id="vignette"></div> <div class="scene-location" id="sceneLocation"> <div class="loc-label"> <div class="loc-eyebrow">Location 01</div> <div class="loc-name">The Bluff of Panic</div> <div class="loc-rule"></div> </div> <div class="crosshair-wrap"> <button class="crosshair-btn" onclick="goToScene2()" aria-label="Enter location"> <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="cglow" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#c9a84c" stop-opacity="0.18"/> <stop offset="100%" stop-color="#c9a84c" stop-opacity="0"/> </radialGradient> </defs> <circle class="ch-pulse-ring" cx="50" cy="50" r="44" stroke="#c9a84c" stroke-width="0.5" opacity="0.6"/> <circle cx="50" cy="50" r="44" fill="url(#cglow)"/> <g class="ch-outer-ring"> <circle cx="50" cy="50" r="43" stroke="#c9a84c" stroke-width="0.6" opacity="0.5" stroke-dasharray="2 6.8"/> </g> <g class="ch-inner-ring"> <circle cx="50" cy="50" r="34" stroke="#c9a84c" stroke-width="0.8" opacity="0.55" stroke-dasharray="1.5 12"/> </g> <circle cx="50" cy="50" r="26" stroke="#c9a84c" stroke-width="1" opacity="0.8"/> <line x1="50" y1="4"  x2="50" y2="22" stroke="#c9a84c" stroke-width="1" opacity="0.9"/> <line x1="50" y1="78" x2="50" y2="96" stroke="#c9a84c" stroke-width="1" opacity="0.9"/> <line x1="4"  y1="50" x2="22" y2="50" stroke="#c9a84c" stroke-width="1" opacity="0.9"/> <line x1="78" y1="50" x2="96" y2="50" stroke="#c9a84c" stroke-width="1" opacity="0.9"/> <line x1="30" y1="30" x2="35" y2="30" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <line x1="30" y1="30" x2="30" y2="35" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <line x1="70" y1="30" x2="65" y2="30" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <line x1="70" y1="30" x2="70" y2="35" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <line x1="30" y1="70" x2="35" y2="70" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <line x1="30" y1="70" x2="30" y2="65" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <line x1="70" y1="70" x2="65" y2="70" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <line x1="70" y1="70" x2="70" y2="65" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/> <circle cx="50" cy="50" r="2.5" fill="#c9a84c"/> <circle cx="50" cy="50" r="1" fill="#fff" opacity="0.8"/> </svg> </button> </div> </div> <div class="scene-watch" id="sceneWatch"> <div class="lbtn" onclick="openLpop()" role="button" tabindex="0" aria-label="Watch video"> <svg viewBox="-60 -40 420 420" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="lp1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#d0f4ff"/><stop offset="100%" stop-color="#0a4a6e"/></linearGradient> <linearGradient id="lp2" x1="20%" y1="0%" x2="80%" y2="100%"><stop offset="0%" stop-color="#b0eeff"/><stop offset="100%" stop-color="#0a3a58"/></linearGradient> <linearGradient id="lp3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#e8faff"/><stop offset="100%" stop-color="#083050"/></linearGradient> <radialGradient id="gctr" cx="50%" cy="35%" r="60%"><stop offset="0%" stop-color="#fffde0"/><stop offset="100%" stop-color="#c9a84c" stop-opacity="0.5"/></radialGradient> <filter id="fb"><feGaussianBlur stdDeviation="3"/></filter> </defs> <ellipse cx="150" cy="278" rx="160" ry="18" fill="rgba(20,160,210,0.15)" filter="url(#fb)"/> <path d="M150 250 C105 230 55 215 18 222 C-5 228 -15 244 -5 258 C30 252 75 240 120 238 Z" fill="url(#lp2)" opacity="0.7"/> <path d="M150 250 C195 230 245 215 282 222 C305 228 315 244 305 258 C270 252 225 240 180 238 Z" fill="url(#lp2)" opacity="0.7"/> <path d="M150 255 C120 180 110 100 150 50 C190 100 180 180 150 255Z" fill="url(#lp3)" opacity="0.9"/> <ellipse cx="150" cy="210" rx="30" ry="18" fill="url(#gctr)"/> </svg> <div class="lbtn-label">Watch</div> </div> </div> <div class="back-btn-wrap" id="backBtn"> <a class="back-btn" href="#" onclick="parent.showMainPage({ direct: true }); return false;">Back</a> </div> <div class="lpop-ov" id="lpopOv" onclick="if(event.target===this)closeLpop()"> <div class="lpop-box"> <div class="lpop-close" onclick="closeLpop()">✕ Close</div> <div class="lpop-vid"> <div class="vid-container"> <iframe id="lpopIframe" src=""
 data-src="https://www.youtube.com/embed/XW8PAQZgs9k"
 allow="autoplay; encrypted-media; fullscreen" allowfullscreen></iframe> </div> </div> <div class="lpop-txt"> <div class="lp-hl">Anxiety Check</div> <div class="lp-intro">If you check 3+ boxes, your Amygdala has taken the wheel.</div> <div class="lp-rule"></div> <div class="lp-stitle">1. The Body</div> <div class="lp-row"><div class="lp-sq"></div><div class="lp-t">Clenched jaw or grinding teeth.</div></div> <div class="lp-row"><div class="lp-sq"></div><div class="lp-t">Shoulders up to your ears.</div></div> <div class="lp-row"><div class="lp-sq"></div><div class="lp-t">Shallow breath (chest only).</div></div> <div class="lp-stitle">2. The Mind</div> <div class="lp-row"><div class="lp-sq"></div><div class="lp-t"><b>The Loop:</b> Replaying the same worry over and over.</div></div> <div class="lp-row"><div class="lp-sq"></div><div class="lp-t"><b>"What If":</b> Instantly jumping to the worst-case scenario.</div></div> <div class="lp-row"><div class="lp-sq"></div><div class="lp-t"><b>Tired but Wired:</b> Body is exhausted, but mind won't stop racing.</div></div> <div style="height: 60px;"></div> </div> </div> </div> <canvas id="fireflies-canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;"></canvas> <script>
(function(){
  window.goToScene2 = function() {
    var s1   = document.getElementById('sceneLocation');
    var s2   = document.getElementById('sceneWatch');
    var bg1  = document.getElementById('bg1');
    var bg2  = document.getElementById('bg2');
    var vig  = document.getElementById('vignette');
    var back = document.getElementById('backBtn');

s1.classList.add('hidden');
    bg2.style.opacity = '1';
    bg1.style.opacity = '0';
    vig.classList.remove('scene-1');
    vig.classList.add('scene-2');

setTimeout(function(){
      s2.classList.add('visible');
      back.classList.add('visible');
    }, 400);
  };

document.addEventListener('mousemove', function(e){
    var bg2 = document.getElementById('bg2');
    var x = (e.clientX - window.innerWidth/2)  * 0.01;
    var y = (e.clientY - window.innerHeight/2) * 0.01;
    bg2.style.transform = 'translate3d('+x+'px,'+y+'px,0) scale(1.05)';
  });

var ov = document.getElementById('lpopOv');
  var fr = document.getElementById('lpopIframe');

var canvas = document.getElementById('fireflies-canvas');
  var ctx = canvas.getContext('2d');
  var W, H;
  function resize(){ W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
  resize();
  window.addEventListener('resize', resize);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Stillness Journey</title> <link href="https://bunny.net" rel="stylesheet"> <style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #000; -webkit-tap-highlight-color: transparent; }

.slide {
    position: fixed; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity 1.2s ease-in-out; z-index: 0;
  }
  .slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
  .slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
  .vign { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 20%, rgba(0,0,0,0.7) 100%); pointer-events: none; }

.s1-title {
    position: absolute; top: 12%; left: 8%; font-family: 'EB Garamond', serif; font-style: italic;
    font-size: clamp(1.8rem, 5.5vw, 2.8rem); color: rgba(245, 237, 220, 0.9);
    text-shadow: 0 2px 20px #000; opacity: 0; transition: 1s 0.5s;
  }
  .active .s1-title { opacity: 1; }
  .s1-btn {
    position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
    width: 110px; height: 110px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(201,168,76,0.5); overflow: hidden;
    transition: all 0.4s ease; opacity: 0;
  }
  .active .s1-btn { opacity: 1; animation: pulseGlow 3s infinite; transition-delay: 1s; }
  @keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(201,168,76,0.4); border-color: rgba(201,168,76,0.5); }
    70% { box-shadow: 0 0 0 25px rgba(201,168,76,0); border-color: rgba(201,168,76,0.8); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); border-color: rgba(201,168,76,0.5); }
  }
  .s1-btn img { width: 100%; height: 100%; object-fit: cover; }

.slide2-bg {
    background-image: url('https://static.tildacdn.net/tild3861-3232-4532-a336-326264303866/noroot.png');
  }
  @media (max-width: 768px) {
    .slide2-bg {
      background-image: url('https://static.tildacdn.net/tild3431-6362-4539-b564-323335393334/noroot.png');
    }
  }

.cave-zone { position: absolute; cursor: pointer; z-index: 10; transition: 0.3s; background: transparent; }
  .cave-right { right: 10%; top: 20%; width: 30%; height: 60%; }
  .cave-left { left: 10%; top: 20%; width: 30%; height: 60%; }
  .cave-label {
    position: absolute; font-family: 'Cinzel', serif; font-size: 1.2rem;
    letter-spacing: 0.3em; color: #c9a84c; opacity: 0; transition: 0.4s;
    text-transform: uppercase; pointer-events: none; text-shadow: 0 0 10px #000; z-index: 11;
  }
  .cave-zone:hover + .cave-label { opacity: 1; }
  .cave-label-r { right: 15%; top: 75%; }
  .cave-label-l { left: 15%; top: 75%; }

.bottom-hint {
    position: absolute; bottom: 7%; width: 100%; text-align: center;
    font-family: 'Cinzel', serif; color: rgba(245,237,220,0.7);
    letter-spacing: 0.2em; font-size: 1.5rem;
    padding: 0 20px;
  }

.back-btn {
    font-family: 'Cinzel', serif;
    text-decoration: none;
    letter-spacing: 0.35em;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
  }
  .back-btn:hover { opacity: 0.7; color: #c9a84c; }

.back-pos-s4 {
    position: absolute;
    top: 52%;
    left: 42%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.7rem;
    letter-spacing: 0.2em;
    opacity: 0.75;
  }

.dead-end-wrapper {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 15px;
  }
  .dead-end-title {
    font-family: 'EB Garamond', serif; font-style: italic;
    font-size: 2.2rem;
    color: #000; letter-spacing: 0.05em; text-align: center;
  }
  .back-pos-s3 {
    color: #000;
    font-size: 1.8rem;
  }

.ground-object-new {
    position: absolute; bottom: 8%; left: 60%; z-index: 50; transform: translateX(-50%);
    width: clamp(200px, 35vw, 320px); cursor: pointer; animation: float 6s ease-in-out infinite;
  }
  @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-15px); } }

.frame { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
  .frame::before { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(201,168,76,0.3); }
  .corner { position: absolute; z-index: 11; width: 35px; height: 35px; opacity: 0.5; stroke: #c9a84c; fill: none; }
  .corner.tl { top: 10px; left: 10px; }
  .corner.tr { top: 10px; right: 10px; transform: scaleX(-1); }
  .corner.bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
  .corner.br { bottom: 10px; right: 10px; transform: scale(-1); }

canvas { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

@media (max-width: 768px) {
    .cave-right { right: 0; width: 48%; height: 70%; top: 15%; }
    .cave-left { left: 0; width: 48%; height: 70%; top: 15%; }
    .cave-label { opacity: 0.8; font-size: 0.55rem; background: rgba(0,0,0,0.4); padding: 5px 8px; }
    .bottom-hint { font-size: 0.9rem; bottom: 12%; padding: 0 15px; }

.back-btn { gap: 8px; }

.back-pos-s4 {
      left: 50px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.90rem;
      letter-spacing: 0.15em;
      opacity: 0.7;
    }

.dead-end-title { font-size: 1.4rem; }
    .back-pos-s3 { font-size: 1rem; }

.ground-object-new { left: 50%; bottom: 15%; width: 220px; }
  }
</style> </head> <body> <div class="slide active" id="slide1"> <div class="slide-bg" style="background-image:url('https://optim.tildacdn.net/tild3132-6432-4537-a433-323239346361/-/format/webp/Picture13.jpg.webp');"></div> <div class="vign"></div> <div class="s1-title">To find stillness,<br>the mind craves logic…</div> <div class="s1-btn" onclick="go(2)"> <img src="https://optim.tildacdn.net/tild3132-6432-4537-a433-323239346361/-/format/webp/Picture13.jpg.webp" alt=""> </div> </div> <div class="slide" id="slide2"> <div class="slide-bg slide2-bg"></div> <div class="vign"></div> <div class="cave-zone cave-right" onclick="go(3)"></div> <div class="cave-label cave-label-r">→ Enter</div> <div class="cave-zone cave-left" onclick="go(4)"></div> <div class="cave-label cave-label-l">Enter ←</div> <div class="bottom-hint">Find a map to decode the inner workings of your anxiety</div> </div> <div class="slide" id="slide3"> <div class="slide-bg" style="background-image:url('https://optim.tildacdn.net/tild3935-3166-4335-a232-646539656564/-/format/webp/765.jpg.webp');"></div> <div class="vign"></div> <div class="dead-end-wrapper"> <div class="dead-end-title">A dead end.</div> <div class="back-btn back-pos-s3" onclick="go(2)">← Back</div> </div> </div> <div class="slide" id="slide4"> <div class="slide-bg" style="background-image:url('https://static.tildacdn.net/tild3639-6436-4964-a236-613861373539/Picture3.png');"></div> <div class="vign"></div> <div class="frame"></div> <div class="corner tl"><svg viewBox="0 0 48 48"><path d="M2 46 V2 H46"/><circle cx="2" cy="2" r="2" fill="#c9a84c"/></svg></div> <div class="corner tr"><svg viewBox="0 0 48 48"><path d="M2 46 V2 H46"/><circle cx="2" cy="2" r="2" fill="#c9a84c"/></svg></div> <div class="corner bl"><svg viewBox="0 0 48 48"><path d="M2 46 H46"/><circle cx="2" cy="2" r="2" fill="#c9a84c"/></svg></div> <div class="corner br"><svg viewBox="0 0 48 48"><path d="M2 46 V2 H46"/><circle cx="2" cy="2" r="2" fill="#c9a84c"/></svg></div> <div class="back-btn back-pos-s4" onclick="parent.showMainPage({ direct: true })">← Back</div> <img src="https://static.tildacdn.net/tild3832-6239-4764-b464-646339623663/Picture4.png" class="ground-object-new" onclick="window.open('https://www.canva.com/design/DAHBlgJcUks/veU3kpLW4CZmtsjLQQ25BA/edit', '_blank', 'noopener,noreferrer')"> <canvas id="fireflies"></canvas> </div> <script>
  let currentSlide = 1;
  function go(n) {
    document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
    document.getElementById('slide' + n).classList.add('active');
    currentSlide = n;
  }
  (function(){
    var c=document.getElementById('fireflies'), ctx=c.getContext('2d'), W, H;
    if(!c) return;
    function r(){W=c.width=window.innerWidth;H=c.height=window.innerHeight;}
    r(); window.addEventListener('resize',r);
    var f=[];
    for(var i=0;i<65;i++){
      f.push({
        x:Math.random()*W, y:Math.random()*H,
        vx:(Math.random()-0.5)*0.4, vy:(Math.random()-0.5)*0.4,
        r:Math.random()*1.2, hue: Math.random() > 0.4 ? 42 : 210
      });
    }
    function loop(){
      ctx.clearRect(0,0,W,H);
      f.forEach(p => {
        p.x+=p.vx; p.y+=p.vy;
        if(p.x<0)p.x=W; if(p.x>W)p.x=0;
        if(p.y<0)p.y=H; if(p.y>H)p.y=0;
        ctx.beginPath(); ctx.arc(p.x, p.y, p.r*2, 0, Math.PI*2);
        ctx.fillStyle = `hsla(${p.hue}, 80%, 70%, ${Math.abs(Math.sin(Date.now()*0.001 + p.x))*0.4})`;
        ctx.fill();
        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
        ctx.fillStyle = `white`; ctx.fill();
      });
      requestAnimationFrame(loop);
    }
    loop();
  })();
</script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>The Still Point</title> <link href="https://bunny.net" rel="stylesheet"> <style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #040810; }

.bg {
    position: fixed; inset: 0; z-index: 0;
    background: url(https://static.tildacdn.net/tild6662-3738-4436-b138-653138313831/Picture15.png)
                center center / cover no-repeat;
  }
  .grade {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(135deg, rgba(20,8,2,0.35) 0%, transparent 50%, rgba(4,12,28,0.2) 100%);
  }
  .vign {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background:
      radial-gradient(ellipse 68% 62% at 50% 48%, transparent 15%, rgba(0,0,0,0.68) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 15%, transparent 60%, rgba(0,0,0,0.7) 100%);
  }
  .mist {
    position: fixed; bottom: 0; left: 0; right: 0; height: 30%; z-index: 3; pointer-events: none;
    background: linear-gradient(to top, rgba(100,70,20,0.22) 0%, transparent 100%);
  }
  .shimmer {
    position: fixed; top: 0; left: 0; right: 0; height: 25%; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom, rgba(20,50,100,0.3) 0%, transparent 100%);
  }
  .glow {
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(ellipse 45% 38% at 50% 50%, rgba(180,140,60,0.07) 0%, transparent 70%);
    animation: breathe 6s ease-in-out infinite;
  }
  @keyframes breathe { 0%,100%{opacity:0.5} 50%{opacity:1} }

.frame {
    position: fixed; inset: 0; z-index: 10; pointer-events: none;
    box-shadow: inset 0 0 130px rgba(0,0,0,0.75);
  }
  .frame::before { content:''; position:absolute; inset:16px; border:1px solid rgba(201,168,76,0.4); }
  .frame::after  { content:''; position:absolute; inset:22px; border:1px solid rgba(201,168,76,0.12); }

.corner { position:fixed; z-index:11; width:44px; height:44px; pointer-events:none; }
  .corner svg { width:100%; height:100%; }
  .corner.tl { top:8px; left:8px; }
  .corner.tr { top:8px; right:8px; transform:scaleX(-1); }
  .corner.bl { bottom:8px; left:8px; transform:scaleY(-1); }
  .corner.br { bottom:8px; right:8px; transform:scale(-1); }

canvas { position:fixed; inset:0; z-index:20; pointer-events:none; }

.morph-layer { position:fixed; inset:0; z-index:25; pointer-events:none; }

.mimg {
    position: absolute;
    cursor: pointer;
    object-fit: cover;
    pointer-events: auto;
    transition:
      left   0.8s cubic-bezier(0.4,0,0.2,1),
      top    0.8s cubic-bezier(0.4,0,0.2,1),
      width  0.8s ease,
      height 0.8s ease,
      opacity 0.8s ease;
  }

#m1 { left:5.8vw;  top:55vh; width:13.5vw; height:13.5vw; }
  #m2 { left:49vw;   top:60vh; width:13.5vw; height:13.5vw; }
  #m3 { left:81vw;   top:60vh; width:10.5vw; height:12vw;   }

#m1.moved { left:32vw; top:14vh; width:26vw; height:26vw; }
  #m2.moved { left:27vw; top:12vh; width:22vw; height:27vw; }
  #m3.moved { left:40vw; top:10vh; width:26vw; height:30vw; }

#lotusBtn {
    position: absolute;
    top: 40%; left: 44%;
    transform: translate(-50%,-50%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.8s ease;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1.1em;
  }
  #lotusBtn svg {
    transition: transform 0.4s ease;
    display: block;
    filter: drop-shadow(0 0 18px rgba(201,168,76,0.55)) drop-shadow(0 0 40px rgba(201,168,76,0.22));
    animation: lotusPulse 3.5s ease-in-out infinite;
  }
  #lotusBtn:hover svg {
    transform: scale(1.12);
    filter: drop-shadow(0 0 28px rgba(201,168,76,0.85)) drop-shadow(0 0 60px rgba(201,168,76,0.4));
  }
  @keyframes lotusPulse {
    0%,100% { filter: drop-shadow(0 0 14px rgba(201,168,76,0.45)) drop-shadow(0 0 36px rgba(201,168,76,0.18)); }
    50%      { filter: drop-shadow(0 0 28px rgba(201,168,76,0.8))  drop-shadow(0 0 60px rgba(201,168,76,0.38)); }
  }

.back-wrap { position:fixed; bottom:44px; right:52px; z-index:50; }

.back-btn {
    display:inline-flex; align-items:center; gap:0.8em;
    font-family:'Cinzel',serif; font-weight:600;
    font-size:1.25rem !important;
    letter-spacing:0.38em;
    color: #ffffff !important;
    text-transform:uppercase;
    text-decoration:none;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
    animation: fadeInBtn 1.2s ease 0.6s forwards;
    pointer-events: auto;
  }

@keyframes fadeInBtn {
    from { opacity:0; transform:translateX(10px); }
    to   { opacity:1; transform:translateX(0); }
  }

.back-btn:hover {
    transform: translateX(-5px);
    opacity: 0.8;
  }

.back-btn::after {
    content:'';
    display:inline-block;
    width:35px;
    height:1.5px;
    background: #ffffff !important;
    transition: width 0.3s;
    flex-shrink:0;
  }

.back-btn:hover::after { width:50px; }

@media (max-width:600px) {
    .back-wrap { bottom:32px; right:28px; }
    .back-btn {
      font-size: 0.8rem !important;
      letter-spacing: 0.24em;
    }
    .back-btn::after { width:16px; height: 1px; }
  }

.text-block {
    position:fixed; left:140px; top:148px; z-index:40;
    max-width:520px;
    display:flex; flex-direction:column; gap:1.1em;
  }
  .text-main {
    font-family:'EB Garamond',serif; font-style:italic;
    font-size:clamp(1rem, 1.55vw, 1.5rem); line-height:1.78;
    color:rgba(240,230,210,0.88); letter-spacing:0.01em;
    opacity:0; animation:fadeUp 1.4s ease 0.9s forwards;
  }
  .text-breath {
    font-family:'Cinzel',serif; font-weight:400;
    font-size:clamp(0.75rem, 1.1vw, 0.95rem); letter-spacing:0.42em;
    text-transform:uppercase; color:rgba(201,168,76,0.97);
    text-shadow: 0 0 18px rgba(201,168,76,0.5), 0 0 40px rgba(201,168,76,0.18);
    opacity:0; animation:fadeUp 1.4s ease 1.45s forwards;
  }
  .text-travel {
    font-family:'Cinzel',serif; font-weight:400;
    font-size:clamp(0.75rem, 1.1vw, 0.95rem); letter-spacing:0.42em;
    text-transform:uppercase; color:rgba(201,168,76,0.82);
    text-shadow: 0 0 16px rgba(201,168,76,0.35), 0 0 32px rgba(201,168,76,0.12);
    opacity:0; animation:fadeUp 1.4s ease 1.75s forwards;
  }
  .text-home {
    font-family:'Cinzel',serif;
    font-size:clamp(0.82rem, 1.25vw, 1rem); letter-spacing:0.45em;
    text-transform:uppercase; color:rgba(201,168,76,0.92);
    opacity:0; animation:fadeUp 1.4s ease 2.1s forwards;
    padding-top:0.15em;
  }
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
  }

@media (max-width:899px) and (min-width:601px) {
    #m1 { left:4vw;  top:54vh; width:19vw; height:19vw; }
    #m2 { left:42vw; top:59vh; width:19vw; height:19vw; }
    #m3 { left:76vw; top:59vh; width:15vw; height:18vw; }
    #m1.moved { left:26vw; top:16vh; width:36vw; height:36vw; }
    #m2.moved { left:20vw; top:14vh; width:32vw; height:38vw; }
    #m3.moved { left:34vw; top:12vh; width:36vw; height:42vw; }
  }

@media (max-width:600px) {
    .frame::before { inset:10px; }
    .frame::after  { inset:15px; }
    .corner { width:32px; height:32px; }
    .corner.tl { top:4px; left:4px; }
    .corner.tr { top:4px; right:4px; }
    .corner.bl { bottom:4px; left:4px; }
    .corner.br { bottom:4px; right:4px; }

.back-wrap { bottom:32px; right:28px; }
    .back-btn  { font-size:0.75rem; letter-spacing:0.24em; }
    .back-btn::after { width:16px; }

.text-block { left:26px; right:26px; top:88px; max-width:none; gap:0.85em; }
    .text-main   { font-size:0.92rem; }
    #m1 { left:3vw;  top:60vh; width:27vw; height:27vw; }
    #m2 { left:37vw; top:64vh; width:27vw; height:27vw; }
    #m3 { left:70vw; top:64vh; width:22vw; height:25vw; }
    #m1.moved { left:8vw;  top:28vh; width:72vw; height:72vw; }
    #m2.moved { left:4vw;  top:25vh; width:64vw; height:76vw; }
    #m3.moved { left:12vw; top:22vh; width:72vw; height:84vw; }
    #lotusBtn { top:50%; left:50%; }
  }

.audio-pop-ov {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,2,5,0.92); backdrop-filter: blur(15px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.5s ease;
  }
  .audio-pop-ov.open { opacity: 1; pointer-events: auto; }

.audio-pop-box {
    position: relative;
    width: 90vw; max-width: 660px;
    background: #02060c;
    border: 1px solid rgba(201,168,76,0.2);
    padding: 3.5rem 3rem 3rem;
    display: flex; flex-direction: column; align-items: center; gap: 2rem;
  }

.audio-pop-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    letter-spacing: 0.45em;
    color: rgba(201,168,76,0.85);
    text-transform: uppercase;
    text-align: center;
  }

.audio-pop-rule {
    width: 80px; height: 1px;
    background: linear-gradient(to right, transparent, #c9a84c, transparent);
  }

.audio-pop-box iframe {
    width: 100%;
    border: none;
    border-radius: 0;
  }

.audio-pop-close {
    position: absolute; top: 20px; right: 28px;
    font-family: 'Cinzel', serif; color: #c9a84c;
    cursor: pointer; text-transform: uppercase;
    letter-spacing: 0.2em; font-size: 0.75rem;
    background: none; border: none;
  }

@media (max-width: 600px) {
    .audio-pop-box { padding: 3rem 1.5rem 2rem; }
  }
</style> </head> <body> <div class="bg"></div> <div class="grade"></div> <div class="vign"></div> <div class="mist"></div> <div class="shimmer"></div> <div class="glow"></div> <div class="frame"></div> <div class="corner tl"><svg viewBox="0 0 48 48" fill="none"><path d="M2 46 L2 2 L46 2" stroke="#c9a84c" stroke-width="1" opacity="0.55"/><path d="M2 18 L8 18 M18 2 L18 8" stroke="#c9a84c" stroke-width="0.8" opacity="0.35"/><circle cx="2" cy="2" r="2" fill="#c9a84c" opacity="0.6"/></svg></div> <div class="corner tr"><svg viewBox="0 0 48 48" fill="none"><path d="M2 46 L2 2 L46 2" stroke="#c9a84c" stroke-width="1" opacity="0.55"/><path d="M2 18 L8 18 M18 2 L18 8" stroke="#c9a84c" stroke-width="0.8" opacity="0.35"/><circle cx="2" cy="2" r="2" fill="#c9a84c" opacity="0.6"/></svg></div> <div class="corner bl"><svg viewBox="0 0 48 48" fill="none"><path d="M2 46 L2 2 L46 2" stroke="#c9a84c" stroke-width="1" opacity="0.55"/><path d="M2 18 L8 18 M18 2 L18 8" stroke="#c9a84c" stroke-width="0.8" opacity="0.35"/><circle cx="2" cy="2" r="2" fill="#c9a84c" opacity="0.6"/></svg></div> <div class="corner br"><svg viewBox="0 0 48 48" fill="none"><path d="M2 46 L2 2 L46 2" stroke="#c9a84c" stroke-width="1" opacity="0.55"/><path d="M2 18 L8 18 M18 2 L18 8" stroke="#c9a84c" stroke-width="0.8" opacity="0.35"/><circle cx="2" cy="2" r="2" fill="#c9a84c" opacity="0.6"/></svg></div> <canvas id="fc"></canvas> <div class="morph-layer"> <img id="m1" class="mimg"
    src="https://static.tildacdn.net/tild6430-3761-4636-b664-633438363530/_1.png"
    data-src-off="https://static.tildacdn.net/tild6430-3761-4636-b664-633438363530/_1.png"
    data-src-on="https://static.tildacdn.net/tild3063-3562-4138-a639-376332376435/noroot.png"
    onclick="morph(this)" alt=""> <img id="m2" class="mimg"
    src="https://static.tildacdn.net/tild6631-3538-4933-b862-306631396632/2.png"
    data-src-off="https://static.tildacdn.net/tild6631-3538-4933-b862-306631396632/2.png"
    data-src-on="https://static.tildacdn.net/tild6366-3431-4638-b633-643733343536/noroot.png"
    onclick="morph(this)" alt=""> <img id="m3" class="mimg"
    src="https://static.tildacdn.net/tild3039-6137-4137-a532-656262336661/_3.png"
    data-src-off="https://static.tildacdn.net/tild3039-6137-4137-a532-656262336661/_3.png"
    data-src-on="https://static.tildacdn.net/tild3136-3331-4039-b537-333335356631/noroot.png"
    onclick="morph(this)" alt=""> <div id="lotusBtn"> <svg width="180" height="180" viewBox="0 0 180 180" fill="none"> <circle cx="90" cy="90" r="82" stroke="#c9a84c" stroke-width="1.2" opacity="0.55"/> <circle cx="90" cy="90" r="73" stroke="#c9a84c" stroke-width="0.7" opacity="0.28"/> <line x1="90" y1="8"   x2="90" y2="16"  stroke="#c9a84c" stroke-width="1" opacity="0.5"/> <line x1="90" y1="164" x2="90" y2="172" stroke="#c9a84c" stroke-width="1" opacity="0.5"/> <line x1="8"  y1="90"  x2="16" y2="90"  stroke="#c9a84c" stroke-width="1" opacity="0.5"/> <line x1="164" y1="90" x2="172" y2="90" stroke="#c9a84c" stroke-width="1" opacity="0.5"/> <path d="M90 128 C76 108 64 84 68 62 C71 49 80 46 90 53 C100 46 109 49 112 62 C116 84 104 108 90 128Z"
            stroke="#c9a84c" stroke-width="1.6" fill="rgba(201,168,76,0.04)" opacity="0.95"/> <path d="M90 124 C73 115 54 103 45 86 C42 74 47 65 56 67 C68 72 80 97 90 124Z"
            stroke="#c9a84c" stroke-width="1.3" fill="none" opacity="0.8"/> <path d="M90 124 C107 115 126 103 135 86 C138 74 133 65 124 67 C112 72 100 97 90 124Z"
            stroke="#c9a84c" stroke-width="1.3" fill="none" opacity="0.8"/> <path d="M90 120 C70 116 48 113 33 100 C27 90 32 77 41 80 C56 85 74 103 90 120Z"
            stroke="#c9a84c" stroke-width="1" fill="none" opacity="0.55"/> <path d="M90 120 C110 116 132 113 147 100 C153 90 148 77 139 80 C124 85 106 103 90 120Z"
            stroke="#c9a84c" stroke-width="1" fill="none" opacity="0.55"/> <circle cx="90" cy="100" r="6.5" stroke="#c9a84c" stroke-width="1.2" fill="none" opacity="0.85"/> <circle cx="90" cy="100" r="2.2" fill="#c9a84c" opacity="0.9"/> <line x1="90" y1="128" x2="90" y2="140" stroke="#c9a84c" stroke-width="1" opacity="0.45"/> </svg> </div> </div> <div class="back-wrap"> <a class="back-btn" href="#" onclick="parent.showMainPage({ direct: true }); return false;">Back</a> </div> <div class="text-block"> <p class="text-main">Deep within you is a sanctuary of absolute peace. It is always waiting for you, you only need to find the path back to it.</p> <p class="text-breath">Take slow, deep breaths.</p> <p class="text-travel">We are traveling to a place where anxiety does not exist.</p> <p class="text-home">Welcome home.</p> </div> <div class="audio-pop-ov" id="audioPopOv" onclick="if(event.target===this)closeAudioPop()"> <div class="audio-pop-box"> <button class="audio-pop-close" onclick="closeAudioPop()">✕ Close</button> <div class="audio-pop-title">Guided Meditation</div> <div class="audio-pop-rule"></div> <iframe id="scIframe"
      src=""
     data-src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/alissa-tretiyakova/meditation&secret_token=s-R5ufvaLzQHq&color=%23c9a84c&auto_play=true&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false"
      height="166"
      scrolling="no"
      allow="autoplay"> </iframe> </div> </div> <script>
function morph(el) {
  el.classList.toggle('moved');
  var goOn = el.classList.contains('moved');
  el.style.opacity = '0';
  setTimeout(function() {
    el.src = goOn ? el.dataset.srcOn : el.dataset.srcOff;
    el.style.opacity = '1';
  }, 400);
  checkAll();
}
function checkAll() {
  var all = document.querySelectorAll('.mimg');
  if (!Array.from(all).every(function(el){ return el.classList.contains('moved'); })) return;
  setTimeout(function(){
    all.forEach(function(el){ el.style.opacity='0'; el.style.pointerEvents='none'; });
    setTimeout(function(){
      var btn = document.getElementById('lotusBtn');
      btn.style.opacity='1'; btn.style.pointerEvents='auto';
    }, 800);
  }, 1000);
}

document.getElementById('lotusBtn').addEventListener('click', function(){
  openAudioPop();
});

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>The Experience | Cinematic Deluxe</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://bunny.net" rel="stylesheet"> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #d4af37;
  --gold-soft: rgba(212, 175, 55, 0.4);
  --gold-bright: #fff3d0;
  --transition-cinematic: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  --vignette-opacity: 0.7;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'EB Garamond', serif;
  color: white;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

.vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,var(--vignette-opacity)) 100%);
  pointer-events: none;
  z-index: 50;
}

.cinema-frame {
  position: fixed;
  inset: 20px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  pointer-events: none;
  z-index: 51;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

@media (max-width: 900px) {
  .cinema-frame {
    inset: 10px;
  }
}

#rotate-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #0a0806;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 30px;
}
.rotate-icon {
  width: 50px; height: 80px;
  border: 2px solid var(--gold);
  border-radius: 6px; margin-bottom: 25px;
  animation: rotate-anim 2s infinite ease-in-out;
}
@keyframes rotate-anim {
  0%, 20% { transform: rotate(0deg); }
  50%, 100% { transform: rotate(-90deg); }
}
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-overlay { display: flex; }
}

.page {
  position: fixed; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-cinematic);
}
.page.active { opacity: 1; pointer-events: all; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hs {
  position: absolute; z-index: 60;
  cursor: pointer;
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.dot-ring {
  position: absolute; width: 70%; height: 70%;
  border: 1px solid var(--gold-soft); border-radius: 50%;
  animation: pulse-ring 3s infinite;
}
.dot-core {
  width: 18px; height: 18px;
  background: var(--gold-bright);
  border-radius: 50%; box-shadow: 0 0 25px var(--gold);
}
@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (min-width: 901px) {
  .hs { width: 140px; height: 140px; }
  .dot-ring {
    width: 75%; height: 75%;
    border: 2px solid rgba(212, 175, 55, 0.6);
  }
  .dot-core {
    width: 34px; height: 34px;
    background: transparent;
    border: 2px solid var(--gold-bright);
    border-radius: 50%;
    box-shadow: 0 0 25px var(--gold), inset 0 0 10px rgba(212,175,55,0.3);
  }
}

.cinema-btn {
  position: absolute; z-index: 60;
  background: none; border: none; color: #fff;
  font-family: 'Cinzel', serif;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.3em; text-transform: uppercase;
  cursor: pointer; padding: 10px 0; transition: 0.5s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cinema-btn::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; background: white;
  transform: scaleX(0.3); transform-origin: left; transition: 0.6s;
}
.cinema-btn:hover::after { transform: scaleX(1); }

#p1 .enter-btn {
  left: 9%; top: 34%;
  font-size: clamp(14px, 1.5vw, 19px);
  text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 1px 6px rgba(0,0,0,0.7);
}

#p2 .floor-text-wrap {
  position: absolute;
  bottom: 8%; left: 50%;
  transform: translateX(-50%);
  width: auto; max-width: 82%;
  text-align: center;
  padding: 19px 33px;
  background: linear-gradient(160deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 40%, rgba(180,160,100,0.06) 100%);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: 4px;
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 60;
}
#p2 .floor-text {
  font-style: italic; line-height: 1.4;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  font-size: clamp(14px, 1.6vw, 16px);
}
@media (min-width: 901px) {
  #p2 .floor-text { font-size: clamp(24px, 2.8vw, 32px); }
  #p2 .floor-text-wrap { bottom: 10%; padding: 28px 52px; }
}
#p2 .stair { left: 20%; top: 24%;
  filter: drop-shadow(0 0 12px rgba(212,175,55,0.7)) drop-shadow(0 0 30px rgba(212,175,55,0.35));
}
@media (max-width: 900px) {
  #p2 .stair { left: 13%; }
}

#p3 .door-dot { right: 20%; top: 22%; }
#p3Next-dot {
  position: absolute; z-index: 60;
  right: 10%; bottom: 22%;
  width: 90px; height: 90px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
}
@media (max-width: 900px) {
  #p3Next-dot { bottom: 14%; }
}

#p4 .trigger-dot { left: 8%; bottom: 8%; }

#p5 .orb { right: 25%; top: 40%; }

#p2 .stair, #p3 .door-dot, #p4 .trigger-dot, #p5 .orb,
[onclick^="goTo"] {
    z-index: 65;
}

.pop-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; pointer-events: none; transition: 0.6s;
  padding: 30px;
}
.pop-bg.open { opacity: 1; pointer-events: all; }
.pop-container {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.pop-bg img {
  max-width: 100%; max-height: 90vh;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.1);
}
.pop-x {
  position: absolute; top: -50px; right: 0;
  font-size: 40px; color: #fff; cursor: pointer;
}

#pop-video {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease; padding: 20px;
}
#pop-video.open { opacity: 1; pointer-events: all; }
#pop-video .video-outer { position: relative; width: 100%; max-width: 920px; }
#pop-video .video-close {
  position: absolute; top: -52px; right: 0;
  font-size: 44px; color: #fff; cursor: pointer; line-height: 1;
}
#pop-video .video-wrap {
  position: relative; width: 100%; padding-top: 56.25%;
  border: 1px solid rgba(212,175,55,0.3); border-radius: 4px;
  overflow: hidden; background: #000;
}
#pop-video .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

@media (max-width: 900px) {
  .pop-bg { padding: 15px; }
  .pop-bg img { max-height: 80vh; width: 95%; }
  .pop-x { top: -60px; right: 5px; font-size: 50px; }
  .cinema-btn { font-size: 16px; }
  #pop-video .video-close { top: -50px; font-size: 50px; }
}
</style> </head> <body> <div class="vignette"></div> <div class="cinema-frame"></div> <div id="rotate-overlay"> <div class="rotate-icon"></div> <p style="letter-spacing:0.2em;font-size:1.1rem;color:var(--gold);text-transform:uppercase;">Please rotate device</p> <p style="font-style:italic;margin-top:10px;opacity:0.6;">Horizontal mode is required</p> </div> <div class="page active" id="p1"> <div class="scene"> <img class="bg" src="https://static.tildacdn.net/tild3233-6462-4234-b430-666630623836/noroot.png" alt=""> <button class="cinema-btn enter-btn" onclick="goTo(2)">Explore the Lighthouse</button> </div> </div> <div class="page" id="p2"> <div class="scene"> <img class="bg" src="https://static.tildacdn.net/tild6261-3632-4861-a530-353737333738/noroot.png" alt=""> <div class="floor-text-wrap"> <div class="floor-text">
        Anxiety is a future-bound hallucination.<br>
        The body is your only anchor in the "now".
      </div> </div> <div class="hs stair" onclick="goTo(3)"><div class="dot-ring"></div><div class="dot-core"></div></div> <div style="position:absolute;right:10%;top:20%;width:30%;height:60%;cursor:pointer;touch-action:manipulation;z-index:65;" onclick="goTo(5)"></div> </div> </div> <div class="page" id="p3"> <div class="scene"> <img class="bg" src="https://static.tildacdn.net/tild3635-6334-4637-b265-636265613334/noroot.png" alt=""> <div class="hs door-dot" id="doorBtn" onclick="goTo(4)"><div class="dot-ring"></div><div class="dot-core"></div></div> <div style="position:absolute;left:5%;top:40%;width:45%;height:55%;cursor:pointer;display:none;touch-action:manipulation;z-index:65;" id="tableBtn" onclick="openPop('pop2')"></div> <div id="p3Next-dot" onclick="goTo(2)"> <div class="dot-ring"></div> <div class="dot-core"></div> </div> </div> </div> <div class="page" id="p4"> <div class="scene"> <img class="bg" src="https://static.tildacdn.net/tild3663-3834-4134-b465-653864383939/noroot.png" alt=""> <div class="hs trigger-dot" onclick="openPop('pop1')"><div class="dot-ring"></div><div class="dot-core"></div></div> <button class="cinema-btn" id="p4Back" style="right:8%;bottom:8%;display:none;opacity:0;color:#fff;font-weight:600;transition:opacity 0.5s;" onclick="finishP4()">Back</button> </div> </div> <div class="page" id="p5"> <div class="scene"> <img class="bg" src="https://static.tildacdn.net/tild3266-6566-4239-a266-396233303831/noroot.png" alt=""> <div class="hs orb" onclick="openVideoPopup()"><div class="dot-ring"></div><div class="dot-core"></div></div> <button class="cinema-btn" style="right:8%;bottom:10%;z-index:60;" onclick="parent.showMainPage({ direct: true })">Return Home</button> </div> </div> <div class="pop-bg" id="pop1" onclick="closePop('pop1')"> <div class="pop-container"> <div class="pop-x">✕</div> <img src="https://static.tildacdn.net/tild3032-6536-4662-b030-366337376162/noroot.png" alt=""> </div> </div> <div class="pop-bg" id="pop2" onclick="closePop('pop2', true)"> <div class="pop-container"> <div class="pop-x">✕</div> <img src="https://static.tildacdn.net/tild3633-3762-4566-a539-626463313837/noroot.png" alt=""> </div> </div> <div id="pop-video"> <div class="video-outer"> <span class="video-close" id="videoCloseBtn">✕</span> <div class="video-wrap"> <iframe
     data-src="https://www.youtube.com/embed/z48s5jK_-sQ?autoplay=1&playsinline=1&rel=0&modestbranding=1"
     data-cookieconsent="marketing"
      frameborder="0"
      allowfullscreen> </iframe> </div> </div> </div> <script>
var cur = 1;

function goTo(n) {
  document.getElementById('p' + cur).classList.remove('active');
  cur = n;
  setTimeout(function() {
    document.getElementById('p' + n).classList.add('active');
  }, 50);
}

function finishP4() {
  document.getElementById('doorBtn').style.display = 'none';
  document.getElementById('tableBtn').style.display = 'block';
  goTo(3);
}

function openVideoPopup() {
  var popup  = document.getElementById('pop-video');
  var iframe = document.getElementById('yt-iframe');
  iframe.src = iframe.getAttribute('data-src');
  popup.classList.add('open');
}

function closeVideoPopup() {
  var popup  = document.getElementById('pop-video');
  var iframe = document.getElementById('yt-iframe');
  popup.classList.remove('open');
  setTimeout(function() { iframe.src = ''; }, 500);
}

document.getElementById('videoCloseBtn').addEventListener('click', closeVideoPopup);
document.getElementById('pop-video').addEventListener('click', function(e) {
  if (e.target === this) closeVideoPopup();
});
</script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <title>Expedition</title> <link href="https://bunny.net" rel="stylesheet"> <style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #000;
  }

.page {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
  }
  .page.active { opacity: 1; pointer-events: all; z-index: 5; }

img.main-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

#page2 img.main-img { object-position: center bottom; }

.journey-quote {
    position: absolute;
    top: 12%; left: 50%;
    transform: translateX(-50%);
    width: 85%;
    text-align: center;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    animation: fadeInDelayed 3.5s forwards;
    opacity: 0;
    z-index: 10;
  }

@keyframes fadeInDelayed {
    0% { opacity: 0; transform: translate(-50%, 15px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
  }

.marker {
    position: absolute;
    width: 90px; height: 115px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
  }

.marker .scan-ring {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 74px; height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(232, 195, 106, 0.5);
    animation: scanPulse 3.2s ease-out infinite;
    pointer-events: none;
  }
  .marker .scan-ring.delay { animation-delay: 1.6s; }

@keyframes scanPulse {
    0%   { transform: translateX(-50%) scale(0.35); opacity: 1; }
    100% { transform: translateX(-50%) scale(2.1); opacity: 0; }
  }

.marker .pin {
    position: relative;
    width: 74px; height: 74px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 195, 106, 0.75);
    background: rgba(10, 8, 4, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(232,195,106,0.15), inset 0 1px 0 rgba(255,255,255,0.12);
  }

.marker .ch {
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }
  .marker .ch::before,
  .marker .ch::after {
    content: '';
    position: absolute;
    background: rgba(232, 195, 106, 0.65);
  }
  .marker .ch::before {
    width: 1px; height: 22px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 -26px 0 rgba(232,195,106,0.65), 0 26px 0 rgba(232,195,106,0.65);
  }
  .marker .ch::after {
    height: 1px; width: 22px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: -26px 0 0 rgba(232,195,106,0.65), 26px 0 0 rgba(232,195,106,0.65);
  }

.marker .pin-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #e8c36a;
    box-shadow: 0 0 8px #e8c36a, 0 0 20px rgba(232,195,106,0.6);
    z-index: 1;
    flex-shrink: 0;
  }

.marker .label {
    margin-top: 11px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    color: #e8c36a;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,0.8);
    white-space: nowrap;
  }

@media (min-width: 901px) {
    .marker { width: 115px; height: 140px; }
    .marker .scan-ring,
    .marker .pin { width: 94px; height: 94px; }
    .marker .pin-dot { width: 9px; height: 9px; }
    .marker .label { font-size: 0.68rem; margin-top: 14px; }
  }

.tent-marker { bottom: 24%; left: 40%; }
  .exp-marker  { bottom: 10%; left: 55%; transform: translateX(-50%); }

.book-trigger {
    position: absolute;
    bottom: 8%; right: 10%;
    width: 20%; height: 25%;
    cursor: pointer;
    z-index: 10;
  }

.back-btn {
    position: fixed;
    bottom: 30px; right: 35px;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: #ffffff !important;
    text-decoration: none;
    text-transform: uppercase;
    z-index: 99999;
    display: none;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.8);
    text-shadow: 0 0 8px rgba(0,0,0,0.9);
    transition: all 0.4s ease;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  .back-btn.visible { display: block; }

#rotate-hint {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    color: #fff;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 1.3rem;
    text-align: center;
    width: 80%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
    text-shadow: 0 0 20px rgba(0,0,0,1);
  }

@media (orientation: portrait) and (max-width: 768px) {
    #rotate-hint.show { opacity: 1; }
    .back-btn { bottom: 25px; right: 25px; font-size: 0.9rem; letter-spacing: 0.25em; }
    .journey-quote { top: 16%; width: 90%; font-size: 1.1rem; }
  }

.book-frame { width: 100%; height: 100%; border: none; }

#page4 {
    background: url('https://static.tildacdn.net/tild6535-6134-4336-b463-623635366634/noroot.png') no-repeat center center;
    background-size: cover;
  }

.expedition-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 0;
  }

.story-frame {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: 40px;
  }

.story-inner {
    width: 85%;
    max-width: 800px;
    text-align: center;
    position: relative;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.step {
    position: absolute;
    opacity: 0;
    filter: blur(30px);
    transform: scale(0.97);
    transition: opacity 2.5s ease, filter 2.5s ease, transform 2.5s ease;
    color: #ffffff;
    font-family: 'EB Garamond', serif;
    font-size: 28px;
    line-height: 1.6;
    font-weight: 400;
    width: 100%;
    pointer-events: none;
  }

.step.active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    pointer-events: auto;
  }

#cta-final {
    display: none;
    opacity: 0;
    filter: blur(15px);
    transition: all 3s ease;
    text-align: center;
    position: absolute;
    width: 100%;
  }

.btn-subscribe {
    background: #ffffff;
    color: #000000;
    padding: 18px 50px;
    border-radius: 0;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    letter-spacing: 2px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    text-transform: uppercase;
    transition: 0.3s;
  }

.btn-subscribe:hover {
    background: #f0f0f0;
    letter-spacing: 3px;
  }

.spam-policy {
    display: block;
    margin-top: 25px;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0.5;
    font-family: 'Cinzel', serif;
    color: #fff;
  }

@media (max-width: 600px) {
    .step { font-size: 20px; }
    .story-frame { padding: 20px; }
  }
</style> </head> <body> <div id="rotate-hint">Rotate your device for a wider perspective...</div> <div class="page active" id="page1"> <div style="position:relative; width:100%; height:100%;"> <img class="main-img" src="https://static.tildacdn.net/tild6237-3464-4463-b138-633735613330/noroot.png"> <div class="journey-quote">
      Your journey toward peace continues far beyond the screen...
    </div> <div class="marker tent-marker" onclick="goTo('page2')"> <div class="scan-ring"></div> <div class="scan-ring delay"></div> <div class="pin"> <div class="ch"></div> <div class="pin-dot"></div> </div> <span class="label">Step inside</span> </div> <div class="book-trigger" onclick="goTo('page3')"></div> </div> </div> <div class="page" id="page2"> <div style="position:relative; width:100%; height:100%;"> <img class="main-img" src="https://static.tildacdn.net/tild3031-3965-4535-b661-356533653266/noroot.png"> <a href="https://canva.link/fkl0v8nkpxbd08n" target="_blank" rel="noopener noreferrer" class="marker exp-marker"> <div class="scan-ring"></div> <div class="scan-ring delay"></div> <div class="pin"> <div class="ch"></div> <div class="pin-dot"></div> </div> <span class="label">Open Mind</span> </a> </div> </div> <div class="page" id="page3"> <iframe class="book-frame" id="book-iframe" src=""></iframe> </div> <div class="page" id="page4"> <div class="expedition-mask"></div> <div class="story-frame"> <div class="story-inner"> <div class="step">This course is coming to an end, but your personal expedition is only just beginning.</div> <div class="step">Remember: anxiety is not your mistake, nor is it a defect.</div> <div class="step">It is simply a raging sea, wild jungles, and dark caves that felt uncontrollable for a long time.</div> <div class="step">But during this time, you haven't just survived the storm - you've built a foundation.</div> <div class="step">You have explored your shores, learned where the sharp rocks hide, and, most importantly, you've learned to light the fire within.</div> <div class="step">Freedom is not the absence of fear. Freedom is when you feel your hands tremble and hear the howl of the wind...</div> <div class="step">...yet you keep moving forward because you've always had a map and a compass.</div> <div class="step">What is important to remember moving forward:</div> <div class="step">Progress is never linear. Fog is just a weather event, not the end of the world.</div> <div class="step">Small steps hold immense power. Every time you choose mindfulness over panic, you grow stronger.</div> <div class="step">You are not your thoughts. You are the one observing them. You are the lighthouse itself - steady and unshakeable.</div> <div class="step">The world around you may remain unpredictable, but now you have a safe harbor within yourself.</div> <div class="step">Do not be afraid to head out into the open sea - you are ready for whatever wave comes your way.</div> <div class="step" style="font-style: italic; font-size: 34px;">Breathe. Live. And keep on shining.</div> <div id="cta-final"> <a href="#" class="btn-subscribe" data-eo-form-toggle-id="c7240ad8-2d02-11f1-bc85-6b67f55e2cc9">Subscribe to new stories</a> <span class="spam-policy">No Spam Policy • Only Insights</span> </div> </div> </div> </div> <button class="back-btn" id="nav-btn" onclick="handleNavBtn()">Back</button> <script async src="https://eocampaign1.com/form/c7240ad8-2d02-11f1-bc85-6b67f55e2cc9.js" data-form="c7240ad8-2d02-11f1-bc85-6b67f55e2cc9"></script> <script>
  const BOOK_URL = 'https://ailisht.tilda.ws/page130678853.html';
  let currentPage = 'page1';
  let storyStarted = false;

function goTo(pageId) {
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    document.getElementById(pageId).classList.add('active');
    currentPage = pageId;

const btn = document.getElementById('nav-btn');

if (pageId === 'page1') {
      btn.classList.remove('visible');
    } else if (pageId === 'page2') {
      btn.textContent = 'Continue';
      btn.classList.add('visible');
    } else if (pageId === 'page3') {
      btn.textContent = 'Back';
      btn.classList.add('visible');
    } else if (pageId === 'page4') {
      btn.classList.remove('visible');
      if (!storyStarted) {
        storyStarted = true;
        startStory();
      }
    }

if (pageId === 'page3') {
      const iframe = document.getElementById('book-iframe');
      if (!iframe.src) iframe.src = BOOK_URL;
    }
  }

function handleNavBtn() {
    if (currentPage === 'page2') {
      goTo('page4');
    } else if (currentPage === 'page3') {
      goTo('page1');
    } else {
      goTo('page1');
    }
  }

function startStory() {
    const steps = document.querySelectorAll('#page4 .step');
    const cta = document.getElementById('cta-final');
    let i = 0;

function playExpedition() {
      if (i >= steps.length) {
        showFinal();
        return;
      }
      if (i > 0) steps[i - 1].classList.remove('active');

setTimeout(() => {
        if (steps[i]) {
          steps[i].classList.add('active');

let text = steps[i].innerText;
          let displayTime = 8000;

if (text.includes("Remember: anxiety is not your mistake") ||
              text.includes("What is important to remember moving forward")) {
            displayTime = 6000;
          }

setTimeout(() => {
            i++;
            playExpedition();
          }, displayTime);
        }
      }, 750);
    }

function showFinal() {
      if (steps.length > 0) steps[steps.length - 1].classList.remove('active');
      cta.style.display = 'block';
      setTimeout(() => {
        cta.style.opacity = '1';
        cta.style.filter = 'blur(0)';
      }, 500);
    }

setTimeout(playExpedition, 750);
  }

window.addEventListener('load', () => {
    const hint = document.getElementById('rotate-hint');
    setTimeout(() => {
      hint.classList.add('show');
      setTimeout(() => hint.classList.remove('show'), 5000);
    }, 2500);
  });

window.addEventListener('orientationchange', () => {
    document.getElementById('rotate-hint').classList.remove('show');
  });
</script> </body> </html>