/*
Theme Name: Erevna Escape 
Version: 4.0.0
Text Domain: erevna-escape
*/
:root{--pin:#ff4d4d;--paper:#eef2ee}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family: "Cutive Mono", monospace;background:#0b0f0f url(assets/img/1def-fond-web.jpg) center top/cover no-repeat fixed;color:#e6e6e6;line-height:1.65;overflow-x:hidden}

/* Sticky header with anchors */
.topbar{position:sticky;top:0;z-index:50;}
.topbar .inner{display:flex;align-items:center;gap:18px;padding:10px 16px;width:min(1120px,92vw);margin:0 auto}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.06em}
.topbar .brand img{width:34px;height:34px;border-radius:6px}
.topbar nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.topbar nav a{color:#dfeeee;text-decoration:none;padding:8px 15px;border-radius:6px;font-size:18px}
.topbar nav a:hover{background:rgba(255,255,255,.06)}
.topbar nav li{list-style:none;}
.container{width:min(1120px,92vw);margin:0 auto;position:relative}
.board{padding:100px 24px 64px;position:relative;margin:24px auto 80px}

/* Hero polaroid */
.hero{display:flex;justify-content:center;margin:8px 0 16px}
.polaroid{background: linear-gradient(135deg, #cfd8cc, #637c4f); padding:10px;border:0px solid #e8e8e8;width:min(340px,80vw);aspect-ratio:4/5;position:relative;transform:rotate(1.8deg);box-shadow:0 10px 28px rgba(0,0,0,.6),0 0 40px rgba(160,255,210,.18)}
.polaroid img{width:100%;height:100%;object-fit:cover;filter:contrast(105%) brightness(105%)}
.pin {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0a581;
    border-color: #e0a581;
    border: 2px solid #886753;
    box-shadow: 0 0 12px rgba(255, 70, 70, .7);
    position: absolute;
    top: 0px;
    left: 50%;
}


.tag{position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    color: #fff;
    border: 1px solid #ddd;
    font-size: 16px;
    border-radius: 4px;
    padding: 6px 10px;
    width: 100%;
    text-align: center;
    font-weight: bold;}

/* Notes */
.flow{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.note{    --tilt: -1.2deg;
    background: linear-gradient(135deg, #cfd8cc, #637c4f);
    color: #000000;
    width: min(420px, 88%);
    padding: 18px 22px;
    border-radius: 6px;
    margin: 6px 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 26px rgba(176, 255, 200, .12);
    transform: rotate(-1.2deg);
    position: relative;}
.note.small{width:min(360px,88%);padding:16px 18px}
.note h3{margin:0 0 8px 0;font-size:22px;letter-spacing:.04em}
.note p{margin:.45em 0;font-size:16px;white-space:pre-line}
.right{align-self:flex-end}.center{align-self:center}

/* Map photos + blinking marker */
.photo{position:relative;background:#111;border:6px solid #91a180;aspect-ratio:1/1;box-shadow:0 6px 18px rgba(0,0,0,.55);transform:rotate(2.2deg);margin:8px 0 18px;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;}
.photo .caption{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#f6f6f6;color:#111;padding:6px 10px;border-radius:4px;font-size:12px;border:1px solid #ddd}
.map-hotspot{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%}
.map-hotspot::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,0,0,.9);background:rgba(255,0,0,.15);box-shadow:0 0 14px rgba(255,0,0,.8) inset,0 0 10px rgba(255,0,0,.6)}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
.map-hotspot::after{content:"";position:absolute;inset:-6px;border:2px solid rgba(255,0,0,.7);border-radius:50%;animation:pulse 1.5s infinite}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:6px;border:1px solid #c6cfcd;background:linear-gradient(#1d2323,#151a1a);color:#e8f6f3;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.6)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(14px) rotate(var(--tilt,0deg));transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg))}

.anchor{position:relative;top:-70px;visibility:hidden}
.site-footer{padding:18px 0 24px;text-align:center;color:#a8b3b3;font-size:14px}
@media (max-width:720px){.note,.note.small,.photo{transform:none}.reveal{transform:translateY(14px)}}