/* 002 — Dublini emlékek: a fixed pub scene with photos hanging in it */
:root {
  --header-h: 76px;
  --ink: #f3e7cf;
  --ink-soft: #cdbb9c;
  --brass: #d3a85c;
  --brass-bright: #f2c979;
  --red-bright: #d9503f;
  --zoom-ease: cubic-bezier(.62, 0, .22, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; color: var(--ink); background: #120c08; font: 16px/1.55 "Manrope", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: light, so the pub (and its TV) shows through */
.skip-link { position: fixed; left: 16px; top: -70px; z-index: 200; padding: 12px 16px; color: #120c08; background: var(--ink); transition: top .2s; }
.skip-link:focus { top: 12px; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 80; height: var(--header-h); padding: 0 3.2vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #e7e0d5; background: linear-gradient(#0b0705e6, #0b070500); transition: opacity .5s; }
.is-zoomed .site-header { opacity: 0; pointer-events: none; }
.monogram { font: 700 28px/1 "Cormorant Garamond", serif; letter-spacing: -.08em; }
.monogram span { color: var(--red-bright); }
.main-nav { display: flex; gap: clamp(44px,5vw,80px); align-items: center; font-weight: 700; text-transform: uppercase; }
.main-nav a { position: relative; padding: 18px 0 14px; color: #b9ae9f; text-shadow: 0 1px 8px #000; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: var(--brass); transition: right .38s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: #f2eee7; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; }
.roll-label { display: inline-flex; white-space: nowrap; }
.letter-window { display: inline-block; height: 1.15em; overflow: hidden; }
.letter-track { display: flex; flex-direction: column; height: 2.3em; }
.letter-track > span { display: block; height: 1.15em; line-height: 1.15em; }

/* Stage, camera, scene */
.pub-stage { position: fixed; inset: 0; overflow: hidden; background: #120c08; touch-action: pan-y pinch-zoom; }
.pub-stage.is-dragging { cursor: grabbing; }
.pub-backdrop { position: absolute; inset: -40px; background: url(/dublin-assets/pub-still.webp) center / cover; filter: blur(28px) brightness(.45) saturate(1.1); }
.pub-camera { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.15s var(--zoom-ease); }
.pub-scene { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .8s ease; }
.pub-stage.is-ready .pub-scene { opacity: 1; }
.pub-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; transition: filter 1s var(--zoom-ease); }
/* The still sits under the video, so the pub is visible even if the video can't play. */
.pub-motion { opacity: 0; transition: opacity .6s ease, filter 1s var(--zoom-ease); }
.pub-stage.is-live .pub-motion { opacity: 1; }
.pub-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, #0b060499); }
.is-zoomed .pub-photo { filter: brightness(.55) saturate(.85) blur(.6px); }

.pub-glow { position: absolute; left: var(--x); top: var(--y); width: 14%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, #ffcf7a40, #ffb34d14 38%, transparent 68%); animation: lamp-breathe 5.2s ease-in-out var(--delay, 0s) infinite; }
.pub-glow-small { width: 8%; }
@keyframes lamp-breathe { 0%, 100% { opacity: .7; } 45% { opacity: 1; } 52% { opacity: .85; } 58% { opacity: 1; } }

/* Photos hanging in the pub */
.print { position: absolute; z-index: 3; padding: 0; border: 0; background: none; cursor: zoom-in; transform: rotate(var(--r, 0deg)); transition: filter .3s, transform .3s; }
.print-photo { position: absolute; inset: 0; overflow: hidden; }
.print-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: filter 1s var(--zoom-ease); }
.print-frame .print-photo { box-shadow: inset 0 0 6px #000c, inset 0 0 1px #000; }
.print-frame .print-photo img { filter: sepia(.3) saturate(.8) brightness(.74) contrast(.96); }
.print.print-quad { left: 0; top: 0; transform-origin: 0 0; transform: var(--rest); transition: filter .3s, transform 1.15s var(--zoom-ease); }
.print.print-quad.is-target { transform: var(--lift); z-index: 4; }
.print.print-quad.is-target .print-photo { box-shadow: 0 10px 30px #000b, inset 0 0 0 1px #0006; }
.print-frame .print-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, #fff2 0 18%, transparent 30% 70%, #0003); }
.print-polaroid { background: #ece3cf; box-shadow: 0 3px 6px #0009, 0 1px 1px #0006; }
.print-polaroid .print-photo { inset: 7% 7% 24% 7%; }
.print-polaroid .print-photo img { filter: sepia(.25) saturate(.85) brightness(.82); }
.print-polaroid { filter: brightness(.86) sepia(.15); }
.print-tape { position: absolute; left: 30%; top: -8%; width: 40%; height: 14%; background: #f3e8c8b8; transform: rotate(-4deg); box-shadow: 0 1px 1px #0003; }
/* Lying on the table / bar; picked up (stands up facing the camera) when zoomed. */
.print-flat { transform: perspective(var(--p, 800px)) rotateX(var(--tilt)) rotate(var(--r)); transition: filter .3s, transform 1.15s var(--zoom-ease), box-shadow 1.15s var(--zoom-ease); box-shadow: 0 1px 1px #000c, 0 0 3px #0008; }
.print-flat::before { content: ""; position: absolute; inset: -35% -12%; }
.print-flat.is-target { transform: perspective(var(--p, 800px)) rotateX(0deg) rotate(calc(var(--r) * .25)); box-shadow: 0 10px 24px #000b, 0 2px 4px #0008; z-index: 4; }
.print:hover, .print:focus-visible { filter: brightness(1.08); }
.print:hover .print-photo img, .print:focus-visible .print-photo img, .print.is-target .print-photo img { filter: none; }
.print.is-target { filter: none; }
.print:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 3px; }
/* a faint glint invites a click */
.print-glint { position: absolute; inset: -6%; border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 1px #ffe3a866, 0 0 12px #ffd48a66; opacity: 0; animation: glint 3.4s ease-in-out infinite; }
.print:nth-child(2) .print-glint { animation-delay: -.7s; } .print:nth-child(3) .print-glint { animation-delay: -1.4s; }
.print:nth-child(4) .print-glint { animation-delay: -2.1s; } .print:nth-child(5) .print-glint { animation-delay: -2.8s; }
@keyframes glint { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.print.is-found .print-glint, .is-zoomed .print-glint { animation: none; opacity: 0; }
.is-zoomed .print:not(.is-target), .is-zoomed .pub-tv:not(.is-target) { filter: brightness(.45) blur(.6px); opacity: .55; pointer-events: none; }
.is-zoomed .print.is-target { cursor: default; }

/* The TV under the ceiling: static until every photo is found */
.pub-tv { position: absolute; z-index: 3; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: #050403; box-shadow: inset 0 0 0 1px #000; }
.pub-tv:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.tv-noise { position: absolute; inset: -50%; opacity: .16; background: repeating-radial-gradient(circle at 17% 32%, #fff 0 .6px, transparent .6px 2.2px), repeating-radial-gradient(circle at 73% 61%, #fff 0 .5px, transparent .5px 1.8px); animation: tv-static .18s steps(3) infinite; }
@keyframes tv-static { 0% { transform: translate(0,0); } 33% { transform: translate(-7%, 4%); } 66% { transform: translate(5%, -6%); } 100% { transform: translate(-3%, 7%); } }
.tv-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.tv-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4%; padding-top: 6%; text-align: center; container-type: inline-size; background: repeating-linear-gradient(#0000 0 2px, #0000002e 3px); }
.tv-channel { position: absolute; right: 4%; top: 18%; font: 700 6cqw/1 "Special Elite", monospace; color: #7cff9a; text-shadow: 0 0 6px #4dff7a; opacity: .8; }
.tv-state { font: 600 4.6cqw/1.2 "Special Elite", monospace; letter-spacing: .04em; color: #d8d2c4; text-shadow: 0 0 8px #000; text-transform: uppercase; }
.tv-play { display: none; width: 15cqw; height: 15cqw; place-items: center; padding-left: 1.5cqw; border-radius: 50%; font-size: 6cqw; color: #fff; background: #c4302be6; box-shadow: 0 6px 20px #000a; }
.pub-tv.is-on { box-shadow: 0 0 40px #9fd4ff33, inset 0 0 0 1px #000; }
.pub-tv.is-on .tv-picture { opacity: .92; }
.pub-tv.is-on .tv-noise { opacity: .05; }
.pub-tv.is-on .tv-state { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); white-space: nowrap; padding: 1.2% 3%; border-radius: 4px; background: #000b; font-size: 3.6cqw; }
.pub-tv.is-on.is-target .tv-play { display: grid; }

/* Note beside the picture while zoomed */
.zoom-note { position: fixed; z-index: 60; right: clamp(20px, 6vw, 96px); top: 50%; width: min(380px, 34vw); transform: translate(24px, -50%); opacity: 0; pointer-events: none; transition: opacity .45s .55s, transform .45s .55s; }
.zoom-note.is-visible { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.zoom-note::before { content: ""; position: absolute; inset: -70px -90px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, #0b0604d9, #0b060499 60%, transparent); }
.zoom-kicker { margin: 0 0 12px; font: 13px/1.3 "Special Elite", serif; letter-spacing: .08em; color: var(--brass-bright); }
.zoom-note h2 { margin: 0; font: 700 clamp(40px, 4.2vw, 64px)/.95 "Caveat", cursive; color: #fff6e3; text-shadow: 0 2px 18px #000; }
.zoom-text { margin: 14px 0 0; font: 500 clamp(22px, 1.9vw, 28px)/1.2 "Caveat", cursive; color: var(--ink-soft); text-shadow: 0 1px 10px #000; }
.zoom-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.zoom-actions button { padding: 11px 16px; border: 1px solid #d3a85c66; border-radius: 999px; background: #0c1611d9; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(6px); }
.zoom-actions button:hover, .zoom-actions button:focus-visible { background: #1f3128; outline: none; border-color: var(--brass-bright); }
.zoom-next { color: var(--brass-bright) !important; }
.zoom-actions [hidden] { display: none; }
.film-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 15px 22px; border-radius: 999px; background: var(--brass-bright); color: #1b120b; font-weight: 700; letter-spacing: .04em; box-shadow: 0 12px 26px #0008; transition: transform .2s, background .2s; }
.film-link[hidden] { display: none; }
.film-link:hover, .film-link:focus-visible { background: #ffdc96; transform: translateY(-2px); outline: 2px solid #fff; outline-offset: 3px; }

/* Intro card */
.pub-intro { position: fixed; z-index: 40; left: clamp(16px, 3.2vw, 48px); bottom: clamp(16px, 4vh, 40px); width: min(370px, calc(100vw - 32px)); padding: 24px 24px 20px; border: 1px solid #d3a85c40; border-radius: 16px; background: linear-gradient(160deg, #1a120bf0, #0d0805f5); box-shadow: 0 24px 60px #000a; backdrop-filter: blur(6px); transition: opacity .4s; }
.is-zoomed .pub-intro, .is-zoomed .coaster-tray { opacity: 0; pointer-events: none; }
.pub-kicker { margin: 0 0 12px; font: 14px/1 "Special Elite", serif; letter-spacing: .08em; color: var(--brass-bright); }
.pub-intro h1 { margin: 0; font: 600 clamp(36px, 3.4vw, 50px)/.95 "Cormorant Garamond", serif; letter-spacing: -.04em; }
.pub-intro h1 em { font-style: normal; color: var(--brass-bright); }
.pub-lead { margin: 14px 0 0; color: var(--ink-soft); font-size: 15px; }
.pub-intro-toggle { position: absolute; right: 14px; top: 14px; padding: 6px 10px; border: 1px solid #d3a85c40; border-radius: 999px; background: transparent; color: #a89878; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.pub-intro.is-collapsed { width: auto; padding: 12px 16px; }
.pub-intro.is-collapsed > :not(.pub-kicker, .pub-intro-toggle) { display: none; }
.pub-intro.is-collapsed .pub-kicker { margin: 0 90px 0 0; }
.pub-intro.is-collapsed .pub-intro-toggle { top: 50%; transform: translateY(-50%); }
.pub-intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s ease, visibility 0s .9s; }

/* Coaster tray: progress */
.coaster-tray { position: fixed; z-index: 40; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 12px; border: 1px solid #d3a85c40; border-radius: 999px; background: #0d0805e8; box-shadow: 0 18px 40px #000a; backdrop-filter: blur(6px); transition: opacity .4s; }
.coasters { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.coaster { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px dashed #d3a85c66; font: 13px/1 "Special Elite", serif; color: #a89878; transition: background .3s, color .3s, transform .3s; }
.coaster.is-found { border: 2px solid #f2c979; color: #2a1a0d; background: radial-gradient(circle, #f6d79a 0 45%, #d3a85c 46% 62%, #f2c979 63%); transform: rotate(-8deg); }
.coaster-tray p { margin: 0; font: 700 12px/1 "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

.pub-toast { position: fixed; z-index: 70; left: 50%; top: calc(var(--header-h) + 8px); transform: translate(-50%, -10px); max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #1b120b; font-weight: 600; font-size: 14px; text-align: center; box-shadow: 0 16px 36px #000a; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.pub-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) { .pub-intro { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px); } }
@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 20px; }
  .monogram { font-size: 21px; }
}
@media (max-width: 760px) {
  .zoom-note { left: 20px; right: 20px; top: auto; bottom: max(24px, env(safe-area-inset-bottom)); width: auto; transform: translateY(24px); }
  .zoom-note.is-visible { transform: none; }
  .zoom-note h2 { font-size: 44px; }
  .zoom-text { font-size: 22px; }
  .pub-intro { padding: 20px 18px 16px; }
  .pub-intro h1 { font-size: 34px; }
  .pub-lead { font-size: 14px; }
  .coaster { width: 28px; height: 28px; font-size: 11px; }
  .coaster-tray { gap: 10px; padding: 8px 14px 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}