/* V11 Cinematic Museum: accessible, progressive motion */
:root{--v11-navy:#092c59;--v11-gold:#d9ae53;--v11-paper:#fbf9f4}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{overflow-x:hidden}
body::after{content:"";position:fixed;top:0;left:0;height:3px;width:var(--reading-progress,0%);background:linear-gradient(90deg,#bd8a30,#f7d47b);z-index:10001;pointer-events:none;transition:width .08s linear}
.reveal-motion{opacity:0;transform:translate3d(0,38px,0);filter:blur(5px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),filter .85s ease;transition-delay:var(--reveal-delay,0ms)}
.reveal-motion.in-view{opacity:1;transform:none;filter:none}
@media(hover:hover){.collection-tile,.card,.person,.place-card,.festival-card,.museum-card{transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease,border-color .32s ease!important}.collection-tile:hover,.card:hover,.person:hover,.place-card:hover,.festival-card:hover,.museum-card:hover{transform:translateY(-5px);box-shadow:0 18px 46px #102b4720!important}}
.hero{isolation:isolate;overflow:hidden}.hero-copy{position:relative;z-index:2}.hero-art{will-change:transform;transform:translate3d(0,var(--hero-shift,0px),0)}.hero-art img{filter:drop-shadow(0 18px 35px #00152a22)}
.section-head h2{letter-spacing:-.025em;text-wrap:balance}.section-head p{max-width:68ch}.collection-grid,.museum-grid,.place-grid,.festival-grid{align-items:stretch}
header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(max-width:760px){.reveal-motion{transform:translateY(20px)}.hero-art{transform:none!important}.section-head h2{line-height:1.12}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal-motion{opacity:1!important;transform:none!important;filter:none!important}.hero-art{transform:none!important}}
/* Barangay story pages */
.story-banner{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(115deg,#092c59,#174875);color:#fff;padding:clamp(25px,5vw,58px);margin:22px 0 26px;min-height:200px;display:flex;flex-direction:column;justify-content:center}
.story-banner:after{content:"";position:absolute;right:-60px;top:-90px;width:310px;height:310px;border:1px solid #ffffff40;border-radius:50%;box-shadow:0 0 0 45px #ffffff0b,0 0 0 90px #ffffff08;pointer-events:none}
.story-banner h1{color:#fff!important;margin:8px 0 14px}.story-banner p{color:#e2e9f2;max-width:64ch;line-height:1.7}.story-kicker{text-transform:uppercase;letter-spacing:.17em;font-weight:700;font-size:12px;color:#f2cb7b}
.story-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:20px;margin:24px 0}.story-panel{background:#fff;border:1px solid #e8e0d4;border-radius:20px;padding:clamp(20px,3vw,30px);box-shadow:0 8px 25px #12233308}.story-panel h2{color:#092c59;margin-top:0}.story-panel p{line-height:1.8;color:#445265}.story-note{border-left:4px solid #d9ae53;background:#faf4e7;border-radius:0 10px 10px 0;padding:14px 17px;color:#594c35}.story-links a{display:block;padding:12px 0;border-bottom:1px solid #eee2d2;color:#0b3b70;font-weight:650;text-decoration:none}.story-links a:hover{text-decoration:underline}.story-meta{display:flex;gap:8px;flex-wrap:wrap}.story-tag{display:inline-block;border-radius:40px;background:#f2e7cc;color:#72531c;font-size:12px;padding:7px 12px;font-weight:650}.story-timeline{padding-left:22px;border-left:2px solid #dec68f}.story-timeline li{padding:0 0 17px 8px;line-height:1.65}.story-timeline strong{color:#0a3769}.story-search{display:inline-flex;align-items:center;justify-content:center;background:#092c59;color:white!important;border-radius:12px;padding:13px 18px;text-decoration:none;font-weight:700}.story-search:hover{background:#194a7b}.story-map{width:100%;height:300px;border:0;border-radius:14px;background:#e5e9eb}.story-directory{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.story-directory a{border:1px solid #e5dac8;background:#fff;border-radius:12px;padding:10px 14px;color:#163f67;text-decoration:none;font-weight:650}.story-directory a:hover{background:#f4ecd9}
@media(max-width:760px){.story-grid{grid-template-columns:1fr}.story-banner{min-height:180px}.story-map{height:230px}}