/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 16:21 Unexpected "33"
Line 16:83 Expected identifier but found "%"
Line 17:0 Unexpected "<"
Line 22:3 Expected identifier but found "%"
Line 23:4 Unexpected "<"
Line 26:3 Expected identifier but found "%"
Line 27:4 Unexpected "{"
Line 27:5 Unexpected "{"
... and 65 more hidden warnings

**/
{%- comment -%} Room 33 — Hero (also carries shared styles/JS for all sections) {%- endcomment -%}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">

<section class="room33-hero" style="--v:{{ section.settings.video_opacity | divided_by: 100.0 }};--o:{{ section.settings.overlay_strength | divided_by: 100.0 }};">
  {%- if section.settings.video_url != blank -%}
    <video class="room33-hero__video" autoplay muted loop playsinline preload="auto">
      <source src="{{ section.settings.video_url }}" type="video/mp4">
    </video>
  {%- elsif section.settings.background_video != blank -%}
    {{ section.settings.background_video | video_tag: autoplay: true, loop: true, muted: true, controls: false, class: 'room33-hero__video' }}
  {%- elsif section.settings.poster != blank -%}
    <div class="room33-hero__video" style="background:url({{ section.settings.poster | image_url: width: 2000 }}) center/cover;"></div>
  {%- endif -%}

  <div class="room33-hero__vignette" aria-hidden="true"></div>

  {%- if section.settings.show_corners -%}
    <span class="room33-hero__corner room33-hero__corner--tl"></span>
    <span class="room33-hero__corner room33-hero__corner--tr"></span>
    <span class="room33-hero__corner room33-hero__corner--bl"></span>
    <span class="room33-hero__corner room33-hero__corner--br"></span>
  {%- endif -%}

  {%- if section.settings.top_label != blank -%}<p class="room33-hero__toplabel">{{ section.settings.top_label }}</p>{%- endif -%}

  <div class="room33-hero__content">
    {%- if section.settings.eyebrow != blank -%}<p class="room33-hero__eyebrow">{{ section.settings.eyebrow }}</p>{%- endif -%}
    {%- if section.settings.headline != blank -%}<h1 class="room33-hero__headline">{{ section.settings.headline | escape | replace: '|', '<br>' }}</h1>{%- endif -%}
    {%- if section.settings.subline != blank -%}<p class="room33-hero__subline">{{ section.settings.subline }}</p>{%- endif -%}
    {%- if section.settings.button_label != blank -%}
      <div class="room33-hero__cta"><a href="{{ section.settings.button_link }}" class="gold-btn">{{ section.settings.button_label }}<span class="gold-btn__arrow">&rarr;</span></a></div>
    {%- endif -%}

    {%- if section.settings.show_scroll_cue -%}
      <div class="room33-hero__scroll" aria-hidden="true"><p class="room33-hero__scroll-label">{{ section.settings.scroll_label }}</p><div class="room33-hero__scroll-line"></div></div>
    {%- endif -%}
  </div>
</section>

{% javascript %}
(function () {
  document.documentElement.classList.add('r33-js');
  var reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
  var px = [];
  var io = ('IntersectionObserver' in window) ? new IntersectionObserver(function (es) {
    es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
  }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' }) : null;
  function onScroll() {
    if (reduce || !px.length) return;
    var vh = innerHeight;
    px.forEach(function (el) {
      var r = el.getBoundingClientRect();
      var p = (vh - r.top) / (vh + r.height); p = p < 0 ? 0 : p > 1 ? 1 : p;
      var sp = parseFloat(el.getAttribute('data-speed')) || 60;
      el.style.transform = 'translateY(' + (sp * (1 - 2 * p)).toFixed(1) + 'px)';
    });
  }
  function scan(root) {
    (root || document).querySelectorAll('.r33-reveal:not([data-seen])').forEach(function (el) {
      el.setAttribute('data-seen', '1'); if (io) io.observe(el); else el.classList.add('is-in');
    });
    if (!reduce) (root || document).querySelectorAll('.r33-parallax:not([data-seen])').forEach(function (el) {
      el.setAttribute('data-seen', '1'); px.push(el);
    });
    onScroll();
  }
  addEventListener('scroll', onScroll, { passive: true });
  addEventListener('resize', onScroll, { passive: true });
  document.addEventListener('shopify:section:load', function () { scan(); });
  if (document.readyState !== 'loading') scan(); else document.addEventListener('DOMContentLoaded', function () { scan(); });
})();
{% endjavascript %}

{% stylesheet %}
/* ===== SHARED (loaded via Hero, applies to every Room 33 section) ===== */
:root{--color-oxblood:#7d1111;--color-oxblood-deep:#5a0e12;--color-ink:#1a0a0b;--color-parchment:#efe7d9;--color-gold:#c2a36a;--color-gold-soft:#d8bf8c;--font-serif:"Cormorant Garamond",ui-serif,Georgia,serif;--font-sans:"Jost",ui-sans-serif,system-ui,sans-serif;}
.room33{color:#efe7d9;font-family:var(--font-sans);}
.room33 h1,.room33 h2,.room33 h3,.room33 h4{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;}
.room33 .gold-btn,a.gold-btn,button.gold-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:.75rem;border:1px solid rgba(194,163,106,.7)!important;background:transparent!important;color:#c2a36a!important;font-family:var(--font-sans)!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:.32em!important;padding:1.2rem 2.7rem!important;font-size:12px!important;line-height:1!important;text-decoration:none!important;border-radius:0!important;cursor:pointer;transition:background .5s,color .5s!important;}
.room33 .gold-btn:hover,a.gold-btn:hover,button.gold-btn:hover{background:#c2a36a!important;color:#1a0a0b!important;}
.gold-btn--sm{padding:.75rem 1.5rem!important;font-size:10px!important;}
.gold-btn__arrow{display:inline-block;transition:transform .5s;}
.gold-btn:hover .gold-btn__arrow{transform:translateX(4px);}
.room33 .hairline{height:1px;width:100%;border:0;background:linear-gradient(90deg,transparent,rgba(194,163,106,.6),transparent);}
.r33-js .r33-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease;}
.r33-js .r33-reveal.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.r33-js .r33-reveal{opacity:1!important;transform:none!important;transition:none;}}
@keyframes r33glint{0%{transform:translateX(-120%);opacity:0}30%{opacity:1}100%{transform:translateX(220%);opacity:0}}
.key-glint{background:linear-gradient(100deg,transparent 30%,rgba(255,240,200,.55) 50%,transparent 70%);transform:translateX(-120%);opacity:0;}
.group:hover .key-glint{animation:r33glint 1.1s ease-out;}

/* ===== HERO ===== */
.room33-hero{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:100svh;overflow:visible;background:#1a0a0b!important;font-family:var(--font-sans);}
.room33-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--v,.55);}
.room33-hero__vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,calc(.85*var(--o,.85))) 100%);}
.room33-hero__corner{position:absolute;width:40px;height:40px;pointer-events:none;border-color:rgba(194,163,106,.6);}
.room33-hero__corner--tl{left:24px;top:24px;border-left:1px solid;border-top:1px solid;}
.room33-hero__corner--tr{right:24px;top:24px;border-right:1px solid;border-top:1px solid;}
.room33-hero__corner--bl{left:24px;bottom:24px;border-left:1px solid;border-bottom:1px solid;}
.room33-hero__corner--br{right:24px;bottom:24px;border-right:1px solid;border-bottom:1px solid;}
@media(min-width:640px){.room33-hero__corner--tl{left:40px;top:40px}.room33-hero__corner--tr{right:40px;top:40px}.room33-hero__corner--bl{left:40px;bottom:40px}.room33-hero__corner--br{right:40px;bottom:40px}}
.room33-hero__toplabel{position:absolute;left:50%;top:32px;transform:translateX(-50%);margin:0;text-align:center;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.5em;color:rgba(239,231,217,.7);}
@media(min-width:640px){.room33-hero__toplabel{top:48px}}
.room33-hero__content{position:relative;z-index:10;width:100%;max-width:768px;margin:0 auto;padding:56px 24px;text-align:center;}
.room33-hero__eyebrow{margin:0;font-size:10px;text-transform:uppercase;letter-spacing:.5em;color:#c2a36a;}
.room33-hero__headline{margin:24px 0 0;font-family:var(--font-serif)!important;font-style:italic;font-weight:400;line-height:1.05;color:#efe7d9;font-size:clamp(3.12rem,8.4vw,9rem);}
.room33-hero__subline{margin:32px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.4em;color:rgba(239,231,217,.75);}
.room33-hero__cta{margin-top:48px;}
.room33-hero__scroll{margin-top:56px;text-align:center;}
.room33-hero__scroll-label{margin:0 0 12px;font-size:9px;text-transform:uppercase;letter-spacing:.4em;color:rgba(239,231,217,.5);}
.room33-hero__scroll-line{width:1px;height:40px;margin:0 auto;background:linear-gradient(to bottom,rgba(194,163,106,.7),transparent);animation:r33bounce 2.4s ease-in-out infinite;}
@keyframes r33bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
{% endstylesheet %}

{% schema %}
{
  "name": "Room 33 Hero",
  "tag": "section",
  "class": "room33 room33-hero-wrap",
  "settings": [
    { "type": "header", "content": "Background" },
    { "type": "video", "id": "background_video", "label": "Background video" },
    { "type": "text", "id": "video_url", "label": "OR .mp4 URL (Files)" },
    { "type": "image_picker", "id": "poster", "label": "Poster / fallback image" },
    { "type": "range", "id": "video_opacity", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Video opacity", "default": 55 },
    { "type": "range", "id": "overlay_strength", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Dark vignette", "default": 85 },
    { "type": "header", "content": "Text" },
    { "type": "text", "id": "top_label", "label": "Top label", "default": "Octavia Morgan · Los Angeles" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "N° 33 · Arrive" },
    { "type": "text", "id": "headline", "label": "Headline (use | for line break)", "default": "Some keys open|more than doors." },
    { "type": "text", "id": "subline", "label": "Sub-line", "default": "Your presence is requested." },
    { "type": "text", "id": "scroll_label", "label": "Scroll cue label", "default": "Enter" },
    { "type": "header", "content": "Button" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Hold Your Key" },
    { "type": "text", "id": "button_link", "label": "Button link", "default": "#reply" },
    { "type": "header", "content": "Details" },
    { "type": "checkbox", "id": "show_corners", "label": "Corner brackets", "default": true },
    { "type": "checkbox", "id": "show_scroll_cue", "label": "Scroll cue", "default": true }
  ],
  "presets": [ { "name": "Room 33 Hero" } ]
}
{% endschema %}