rebly-sections 1.3.0 → 1.4.0

package/assets/data/animations.csv

@@ -0,0 +1,29 @@
+name,category,css_keyframes,easing,duration,trigger,shopify_compatible,reduced_motion_fallback,use_case,keywords
+fade-in,entrance,@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } },ease-out,0.6s,load/scroll,yes,opacity:1,Hero sections appearing on load or scroll,fade enter appear reveal
+slide-up,entrance,@keyframes slideUp { from { transform: translateY(30px); opacity: 0 } to { transform: translateY(0); opacity: 1 } },cubic-bezier(0.4 0 0.2 1),0.6s,scroll,yes,no transform,Cards and text blocks sliding into view,slide up enter reveal
+slide-in-left,entrance,@keyframes slideInLeft { from { transform: translateX(-30px); opacity: 0 } to { transform: translateX(0); opacity: 1 } },ease-out,0.5s,scroll,yes,no transform,Image with text sections entering from left,slide left enter reveal
+slide-in-right,entrance,@keyframes slideInRight { from { transform: translateX(30px); opacity: 0 } to { transform: translateX(0); opacity: 1 } },ease-out,0.5s,scroll,yes,no transform,Alternating layouts entering from right,slide right enter reveal
+scale-in,entrance,@keyframes scaleIn { from { transform: scale(0.95); opacity: 0 } to { transform: scale(1); opacity: 1 } },ease-out,0.4s,scroll,yes,opacity:1,Cards and images scaling into view,scale zoom grow enter reveal
+stagger-children,entrance,animation-delay increments of 0.1s per child element via CSS custom property --stagger-index,ease-out,0.5s,scroll,yes,no delay,Grids lists and feature item sequences,stagger cascade sequential children delay
+blur-in,entrance,@keyframes blurIn { from { filter: blur(10px); opacity: 0 } to { filter: blur(0); opacity: 1 } },ease-out,0.8s,scroll,yes,opacity:1,Hero backgrounds and overlay elements,blur focus enter reveal
+clip-reveal,entrance,@keyframes clipReveal { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0% 0 0) } },cubic-bezier(0.77 0 0.175 1),0.8s,scroll,yes,opacity:1,Text headings and premium content reveals,clip mask reveal wipe text premium
+button-hover-lift,micro-interaction,transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0 0 0 / 0.15),ease,0.2s,hover,yes,no transform,Buttons and CTA elements on hover,button hover lift shadow cta
+card-hover-lift,micro-interaction,transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0 0 0 / 0.12),cubic-bezier(0.4 0 0.2 1),0.3s,hover,yes,box-shadow only,Product cards and feature cards on hover,card hover lift shadow product
+image-zoom,micro-interaction,transform: scale(1.05),ease,0.4s,hover,yes,no transform,Gallery images and product images on hover,image zoom scale hover gallery product
+underline-slide,micro-interaction,background-size: 0% 2px to 100% 2px using background-image: linear-gradient(currentColor currentColor),ease-out,0.3s,hover,yes,text-decoration underline,Links and navigation items on hover,underline slide link navigation hover
+icon-bounce,micro-interaction,@keyframes iconBounce { 0% 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } },ease-in-out,0.4s,hover,yes,no animation,Icons and social link elements on hover,icon bounce hover social
+color-shift,micro-interaction,background-color transition or gradient background-position shift,ease,0.3s,hover,yes,instant change,Buttons tags and badges on hover,color transition shift hover button badge
+border-draw,micro-interaction,box-shadow inset 0 0 0 2px var(--color-primary) transition,ease-out,0.4s,hover/focus,yes,solid border,Input fields and card borders on focus or hover,border draw outline focus input
+pulse-glow,micro-interaction,@keyframes pulseGlow { 0% 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb) / 0.4) } 50% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb) / 0) } },ease-in-out,2s,attention,yes,static shadow,Sale badges and notification indicators,pulse glow attention badge notification
+parallax-bg,scroll-triggered,transform: translateY(calc(var(--scroll-offset) * 0.3)) updated via JS scroll listener on requestAnimationFrame,linear,continuous,scroll,yes (JS required),static background position,Hero backgrounds with depth effect,parallax depth scroll background hero
+reveal-on-scroll,scroll-triggered,Intersection Observer adds .is-visible class which triggers CSS transition opacity and transform,ease-out,0.6s,scroll,yes,visible immediately,Any section or element revealed on scroll,scroll reveal intersect observe visible
+counter-up,scroll-triggered,JS counting animation incrementing from 0 to target number via requestAnimationFrame,ease-out,2s,scroll-visible,yes (JS required),show final number,Stats sections and achievement numbers,counter number count up stats
+progress-bar,scroll-triggered,width: 0% transitioning to target percentage when element enters viewport,ease-out,1.5s,scroll-visible,yes,show full width,Skills bars loading indicators and stat displays,progress bar fill width scroll
+stagger-grid,scroll-triggered,Grid items gain .is-visible class sequentially via Intersection Observer with index-based animation-delay,ease-out,0.4s per item,scroll,yes,all visible,Product grids and image galleries,grid stagger appear sequential scroll
+text-split-reveal,scroll-triggered,Each line or word revealed sequentially via clip-path: inset(100% 0 0 0) to inset(0) with staggered delay,cubic-bezier(0.77 0 0.175 1),0.6s per line,scroll,yes (JS required),all visible,Headlines and testimonial text,text split word reveal line headline
+scroll-snap,scroll-triggered,CSS scroll-snap-type: x mandatory on container with scroll-snap-align: start on children,ease,native,scroll,yes,normal scroll,Carousels and testimonial sliders,snap carousel swipe slider scroll
+fade-slide-section,scroll-triggered,@keyframes fadeSectionIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } triggered by Intersection Observer,ease-out,0.8s,scroll,yes,visible,Full page sections fading and sliding on scroll enter,section fade slide enter scroll reveal
+gpu-accelerated,performance,will-change: transform opacity; transform: translateZ(0) applied to animated elements,n/a,n/a,n/a,yes,remove will-change after animation,All animated elements requiring smooth GPU-composited rendering,gpu accelerate performance smooth compositing
+reduced-motion-reset,performance,@media (prefers-reduced-motion: reduce) { * *::before *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } },n/a,n/a,always,yes,n/a,Global accessibility reset for users who prefer reduced motion,reduced motion accessibility a11y prefers-reduced-motion
+intersection-observer-base,performance,const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-visible'); observer.unobserve(e.target); } }); }{ threshold: 0.15 });,n/a,n/a,scroll,yes,n/a,Base scroll trigger utility for all scroll-triggered animations,observer intersect scroll trigger utility base
+loading-skeleton,performance,@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } } with linear-gradient background,ease-in-out,1.5s infinite,load,yes,static background color,Loading state placeholders for images and content blocks,skeleton shimmer loading placeholder

package/assets/data/component-library/features-grid.liquid

@@ -1,12 +1,23 @@
-{%- comment -%} rebly-sections: Features Grid | Category: content | OS2.0 {%- endcomment -%}
+{%- comment -%} rebly-sections: Features Grid | Category: content | OS2.0 | Stagger-reveal + icon animations {%- endcomment -%}
+{%- assign font = section.settings.heading_font -%}
+{%- assign heading_tag = section.settings.heading_tag -%}
 
-<section id="section-{{ section.id }}" class="features-grid">
-  <div class="features-grid__container">
+{{ font | font_face: font_display: 'swap' }}
+
+<section id="section-{{ section.id }}" class="features-grid color-{{ section.settings.color_scheme }}">
+  <div class="features-grid__container" style="
+    --pt: {{ section.settings.padding_top }}px;
+    --pb: {{ section.settings.padding_bottom }}px;
+    --heading-size: {{ section.settings.heading_font_size }}px;
+    --heading-font: {{ font.family }}, {{ font.fallback_families }};
+    --heading-weight: {{ font.weight }};
+    --cols: {{ section.settings.columns_per_row }};
+  ">
 
     {%- if section.settings.heading != blank or section.settings.subheading != blank -%}
       <div class="features-grid__header">
         {%- if section.settings.heading != blank -%}
-          <h2 class="features-grid__heading">{{ section.settings.heading | escape }}</h2>
+          <{{ heading_tag }} class="features-grid__heading">{{ section.settings.heading | escape }}</{{ heading_tag }}>
         {%- endif -%}
         {%- if section.settings.subheading != blank -%}
           <p class="features-grid__subheading">{{ section.settings.subheading | escape }}</p>
@@ -14,21 +25,44 @@
       </div>
     {%- endif -%}
 
-    <div class="features-grid__items" style="--cols: {{ section.settings.columns_per_row }};">
+    <div class="features-grid__items">
       {%- for block in section.blocks -%}
         {%- if block.type == 'feature' -%}
-          <div class="features-grid__item" {{ block.shopify_attributes }}>
+          <div class="features-grid__item feat-reveal" {{ block.shopify_attributes }}>
+            {%- comment -%} Icon wrapper — bounce/scale animation on hover {%- endcomment -%}
             {%- if block.settings.icon_image != blank -%}
-              <div class="features-grid__icon">
-                {{- block.settings.icon_image | image_url: width: 80 | image_tag: loading: 'lazy' -}}
+              <div class="features-grid__icon-wrap" aria-hidden="true">
+                <div class="features-grid__icon">
+                  <img
+                    src="{{ block.settings.icon_image | image_url: width: 80 }}"
+                    srcset="{{ block.settings.icon_image | image_url: width: 80 }} 1x, {{ block.settings.icon_image | image_url: width: 160 }} 2x"
+                    loading="lazy"
+                    alt=""
+                    width="64"
+                    height="64"
+                  >
+                </div>
+              </div>
+            {%- elsif block.settings.icon_emoji != blank -%}
+              <div class="features-grid__icon-wrap" aria-hidden="true">
+                <div class="features-grid__icon features-grid__icon--emoji">
+                  {{ block.settings.icon_emoji }}
+                </div>
               </div>
             {%- endif -%}
+
             {%- if block.settings.heading != blank -%}
               <h3 class="features-grid__item-heading">{{ block.settings.heading | escape }}</h3>
             {%- endif -%}
             {%- if block.settings.text != blank -%}
               <p class="features-grid__item-text">{{ block.settings.text | escape }}</p>
             {%- endif -%}
+            {%- if block.settings.link_label != blank -%}
+              <a href="{{ block.settings.link_url }}" class="features-grid__link">
+                {{ block.settings.link_label | escape }}
+                <span class="features-grid__link-arrow" aria-hidden="true">&#8594;</span>
+              </a>
+            {%- endif -%}
           </div>
         {%- endif -%}
       {%- endfor -%}
@@ -38,37 +72,136 @@
 </section>
 
 <style>
-  #section-{{ section.id }} .features-grid__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
-  #section-{{ section.id }} .features-grid__header { text-align: center; margin-bottom: 3rem; }
-  #section-{{ section.id }} .features-grid__heading { font-size: 2rem; margin: 0 0 0.75rem; color: inherit; }
-  #section-{{ section.id }} .features-grid__subheading { font-size: 1.125rem; opacity: 0.75; margin: 0; color: inherit; }
+  /* ── Layout ── */
+  #section-{{ section.id }} .features-grid__container {
+    max-width: 1200px; margin: 0 auto;
+    padding: var(--pt, 80px) 2rem var(--pb, 80px);
+  }
+  #section-{{ section.id }} .features-grid__header { text-align: center; margin-bottom: 3.5rem; }
+  #section-{{ section.id }} .features-grid__heading {
+    font-family: var(--heading-font); font-weight: var(--heading-weight);
+    font-size: clamp(1.75rem, 3vw, var(--heading-size, 2.5rem));
+    margin: 0 0 0.75rem; color: rgb(var(--color-foreground));
+  }
+  #section-{{ section.id }} .features-grid__subheading {
+    font-size: clamp(1rem, 1.5vw, 1.125rem); opacity: 0.7; max-width: 640px;
+    margin: 0 auto; color: rgb(var(--color-foreground)); line-height: 1.6;
+  }
+  /* ── Grid: 1 → 2 → N cols ── */
   #section-{{ section.id }} .features-grid__items {
     display: grid;
     grid-template-columns: repeat(var(--cols, 3), 1fr);
     gap: 2rem;
   }
-  #section-{{ section.id }} .features-grid__item { text-align: center; padding: 1.5rem; }
-  #section-{{ section.id }} .features-grid__icon { margin: 0 auto 1rem; width: 60px; height: 60px; }
-  #section-{{ section.id }} .features-grid__icon img { width: 100%; height: 100%; object-fit: contain; }
-  #section-{{ section.id }} .features-grid__item-heading { font-size: 1.25rem; margin: 0 0 0.5rem; color: inherit; }
-  #section-{{ section.id }} .features-grid__item-text { line-height: 1.6; opacity: 0.8; margin: 0; color: inherit; }
+  /* ── Card: lift + border reveal on hover ── */
+  #section-{{ section.id }} .features-grid__item {
+    padding: 2rem 1.75rem; border-radius: 12px; text-align: center;
+    background: rgb(var(--color-background));
+    border: 1px solid rgba(var(--color-foreground), 0.08);
+    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
+                box-shadow 0.35s ease,
+                border-color 0.35s ease;
+    will-change: transform;
+  }
+  #section-{{ section.id }} .features-grid__item:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 60px rgba(var(--color-foreground), 0.1);
+    border-color: rgba(var(--color-button), 0.4);
+  }
+  /* ── Icon: bounce-scale animation on hover ── */
+  #section-{{ section.id }} .features-grid__icon-wrap { margin: 0 auto 1.25rem; }
+  #section-{{ section.id }} .features-grid__icon {
+    width: 72px; height: 72px; margin: 0 auto;
+    display: grid; place-items: center;
+    background: rgba(var(--color-button), 0.1); border-radius: 50%;
+    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
+    will-change: transform;
+  }
+  #section-{{ section.id }} .features-grid__icon img { width: 40px; height: 40px; object-fit: contain; }
+  #section-{{ section.id }} .features-grid__icon--emoji { font-size: 2rem; background: rgba(var(--color-button), 0.08); }
+  #section-{{ section.id }} .features-grid__item:hover .features-grid__icon {
+    transform: scale(1.2) rotate(-5deg);
+  }
+  /* ── Text ── */
+  #section-{{ section.id }} .features-grid__item-heading {
+    font-size: 1.125rem; font-weight: 700; margin: 0 0 0.625rem;
+    color: rgb(var(--color-foreground));
+  }
+  #section-{{ section.id }} .features-grid__item-text {
+    font-size: 0.9375rem; line-height: 1.65; opacity: 0.75; margin: 0 0 1rem;
+    color: rgb(var(--color-foreground));
+  }
+  #section-{{ section.id }} .features-grid__link {
+    font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-button));
+    text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
+  }
+  #section-{{ section.id }} .features-grid__link-arrow {
+    display: inline-block;
+    transition: transform 0.2s ease;
+  }
+  #section-{{ section.id }} .features-grid__link:hover .features-grid__link-arrow { transform: translateX(4px); }
+  /* ── Scroll-reveal ── */
+  #section-{{ section.id }} .feat-reveal {
+    opacity: 0; transform: translateY(30px);
+    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
+  }
+  #section-{{ section.id }} .feat-reveal.is-visible { opacity: 1; transform: translateY(0); }
+  /* ── Reduced motion ── */
+  @media (prefers-reduced-motion: reduce) {
+    #section-{{ section.id }} .feat-reveal { opacity: 1; transform: none; transition: none; }
+    #section-{{ section.id }} .features-grid__item { transition: none; }
+    #section-{{ section.id }} .features-grid__icon { transition: none; }
+    #section-{{ section.id }} .features-grid__link-arrow { transition: none; }
+  }
+  /* ── Responsive ── */
   @media (max-width: 989px) {
     #section-{{ section.id }} .features-grid__items { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 749px) {
-    #section-{{ section.id }} .features-grid__items { grid-template-columns: 1fr; }
+    #section-{{ section.id }} .features-grid__items { grid-template-columns: 1fr; gap: 1.25rem; }
+    #section-{{ section.id }} .features-grid__item { padding: 1.5rem 1.25rem; }
   }
 </style>
 
+<script>
+/* Stagger reveal — Intersection Observer with per-item delay */
+(function() {
+  var items = document.querySelectorAll('#section-{{ section.id }} .feat-reveal');
+  if (!items.length) return;
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    items.forEach(function(el) { el.classList.add('is-visible'); });
+    return;
+  }
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry, i) {
+      if (entry.isIntersecting) {
+        setTimeout(function() { entry.target.classList.add('is-visible'); }, i * 90);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+  items.forEach(function(el) { observer.observe(el); });
+})();
+</script>
+
 {% schema %}
 {
   "name": "Features Grid",
   "tag": "section",
   "class": "section-features-grid",
   "settings": [
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color Scheme", "default": "scheme-1" },
+    { "type": "font_picker", "id": "heading_font", "label": "Heading Font", "default": "helvetica_n4" },
+    { "type": "range", "id": "heading_font_size", "label": "Heading Size (px)", "min": 20, "max": 56, "step": 2, "default": 40 },
+    { "type": "select", "id": "heading_tag", "label": "Heading Tag", "options": [
+      { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" },
+      { "value": "h3", "label": "H3" }, { "value": "h4", "label": "H4" }
+    ], "default": "h2" },
     { "type": "text", "id": "heading", "label": "Heading", "default": "Why choose us" },
-    { "type": "text", "id": "subheading", "label": "Subheading" },
-    { "type": "range", "id": "columns_per_row", "label": "Columns", "min": 2, "max": 4, "step": 1, "default": 3 }
+    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Everything you need to succeed." },
+    { "type": "range", "id": "columns_per_row", "label": "Columns (desktop)", "min": 2, "max": 4, "step": 1, "default": 3 },
+    { "type": "range", "id": "padding_top", "label": "Padding Top (px)", "min": 0, "max": 160, "step": 8, "default": 80 },
+    { "type": "range", "id": "padding_bottom", "label": "Padding Bottom (px)", "min": 0, "max": 160, "step": 8, "default": 80 }
   ],
   "blocks": [
     {
@@ -76,8 +209,11 @@
       "name": "Feature",
       "settings": [
         { "type": "image_picker", "id": "icon_image", "label": "Icon Image" },
-        { "type": "text", "id": "heading", "label": "Heading", "default": "Feature title" },
-        { "type": "text", "id": "text", "label": "Description", "default": "Describe your feature here." }
+        { "type": "text", "id": "icon_emoji", "label": "Icon Emoji (fallback)", "default": "✦" },
+        { "type": "text", "id": "heading", "label": "Heading", "default": "Feature Title" },
+        { "type": "textarea", "id": "text", "label": "Description", "default": "Describe this feature in a sentence or two that highlights the value." },
+        { "type": "text", "id": "link_label", "label": "Link Label" },
+        { "type": "url", "id": "link_url", "label": "Link URL" }
       ]
     },
     { "type": "@app" }
@@ -85,9 +221,7 @@
   "presets": [{
     "name": "Features Grid",
     "blocks": [
-      { "type": "feature" },
-      { "type": "feature" },
-      { "type": "feature" }
+      { "type": "feature" }, { "type": "feature" }, { "type": "feature" }
     ]
   }]
 }

package/assets/data/component-library/hero-banner.liquid

@@ -1,102 +1,215 @@
-{%- comment -%} rebly-sections: Hero Banner | Category: hero | OS2.0 {%- endcomment -%}
+{%- comment -%} rebly-sections: Hero Banner | Category: hero | OS2.0 | Awwwards-level {%- endcomment -%}
+{%- assign font = section.settings.heading_font -%}
+{%- assign heading_tag = section.settings.heading_tag -%}
 
-<section id="section-{{ section.id }}" class="hero-banner">
-  <div class="hero-banner__inner"
-    style="
-      --overlay-opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
-      --text-color: {{ section.settings.text_color }};
-      --min-height: {{ section.settings.min_height }}px;
-    ">
+{{ font | font_face: font_display: 'swap' }}
+
+<section id="section-{{ section.id }}" class="hero-banner color-{{ section.settings.color_scheme }}">
+  <div class="hero-banner__inner" style="
+    --overlay-opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
+    --min-height: {{ section.settings.min_height }}px;
+    --pt: {{ section.settings.padding_top }}px;
+    --pb: {{ section.settings.padding_bottom }}px;
+    --heading-size: {{ section.settings.heading_font_size }}px;
+    --heading-font: {{ font.family }}, {{ font.fallback_families }};
+    --heading-weight: {{ font.weight }};
+  ">
 
     {%- if section.settings.image != blank -%}
-      <div class="hero-banner__bg">
-        {{- section.settings.image | image_url: width: 1920 | image_tag: loading: 'eager', fetchpriority: 'high', class: 'hero-banner__img' -}}
+      {%- comment -%} Parallax container — JS nudges translateY on scroll {%- endcomment -%}
+      <div class="hero-banner__parallax" aria-hidden="true">
+        <img
+          src="{{ section.settings.image | image_url: width: 1920 }}"
+          srcset="
+            {{ section.settings.image | image_url: width: 750 }} 750w,
+            {{ section.settings.image | image_url: width: 1200 }} 1200w,
+            {{ section.settings.image | image_url: width: 1920 }} 1920w"
+          sizes="100vw"
+          loading="eager"
+          fetchpriority="high"
+          alt="{{ section.settings.image.alt | escape }}"
+          class="hero-banner__img"
+          width="{{ section.settings.image.width }}"
+          height="{{ section.settings.image.height }}"
+        >
       </div>
     {%- endif -%}
 
-    <div class="hero-banner__overlay"></div>
+    {%- comment -%} Glassmorphism overlay — conditionally applied {%- endcomment -%}
+    <div class="hero-banner__overlay{% if section.settings.glass_overlay %} hero-banner__overlay--glass{% endif %}"></div>
 
     {%- for block in section.blocks -%}
       <div {{ block.shopify_attributes }}></div>
     {%- endfor -%}
 
     <div class="hero-banner__content hero-banner__content--{{ section.settings.content_position }}">
+      {%- if section.settings.eyebrow != blank -%}
+        <p class="hero-banner__eyebrow hero-anim hero-anim--1">{{ section.settings.eyebrow | escape }}</p>
+      {%- endif -%}
       {%- if section.settings.heading != blank -%}
-        <h1 class="hero-banner__heading">{{ section.settings.heading | escape }}</h1>
+        <{{ heading_tag }} class="hero-banner__heading hero-anim hero-anim--2">
+          {{ section.settings.heading | escape }}
+        </{{ heading_tag }}>
       {%- endif -%}
       {%- if section.settings.subtext != blank -%}
-        <p class="hero-banner__subtext">{{ section.settings.subtext | escape }}</p>
-      {%- endif -%}
-      {%- if section.settings.button_label != blank -%}
-        <a href="{{ section.settings.button_link }}" class="hero-banner__btn btn">
-          {{ section.settings.button_label | escape }}
-        </a>
+        <p class="hero-banner__subtext hero-anim hero-anim--3">{{ section.settings.subtext | escape }}</p>
       {%- endif -%}
+      <div class="hero-banner__actions hero-anim hero-anim--4">
+        {%- if section.settings.button_label != blank -%}
+          <a href="{{ section.settings.button_link }}" class="hero-banner__btn hero-banner__btn--primary">
+            {{ section.settings.button_label | escape }}
+          </a>
+        {%- endif -%}
+        {%- if section.settings.button_label_2 != blank -%}
+          <a href="{{ section.settings.button_link_2 }}" class="hero-banner__btn hero-banner__btn--secondary">
+            {{ section.settings.button_label_2 | escape }}
+          </a>
+        {%- endif -%}
+      </div>
     </div>
 
   </div>
 </section>
 
 <style>
+  /* ── Base ── */
   #section-{{ section.id }} .hero-banner__inner {
-    position: relative;
-    display: grid;
-    place-items: center;
-    min-height: var(--min-height, 500px);
-    overflow: hidden;
-    color: var(--text-color, #ffffff);
-  }
-  #section-{{ section.id }} .hero-banner__bg,
+    position: relative; display: grid; place-items: center;
+    min-height: var(--min-height, 600px); overflow: hidden;
+    padding-top: var(--pt, 80px); padding-bottom: var(--pb, 80px);
+  }
+  /* ── Parallax bg — GPU-only transforms ── */
+  #section-{{ section.id }} .hero-banner__parallax {
+    position: absolute; inset: -15% 0; will-change: transform;
+  }
   #section-{{ section.id }} .hero-banner__img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    width: 100%; height: 100%; object-fit: cover; display: block;
   }
+  /* ── Overlay: standard + glassmorphism variant ── */
   #section-{{ section.id }} .hero-banner__overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(0,0,0, var(--overlay-opacity, 0.4));
+    position: absolute; inset: 0;
+    background: rgba(var(--color-overlay-rgb, 0,0,0), var(--overlay-opacity, 0.45));
+  }
+  #section-{{ section.id }} .hero-banner__overlay--glass {
+    backdrop-filter: blur(4px) saturate(1.4);
+    -webkit-backdrop-filter: blur(4px) saturate(1.4);
   }
+  /* ── Content ── */
   #section-{{ section.id }} .hero-banner__content {
-    position: relative;
-    z-index: 1;
-    padding: 2rem;
-    max-width: 800px;
-    text-align: center;
+    position: relative; z-index: 1; padding: 2rem;
+    max-width: 860px; text-align: center; width: 100%;
+    color: rgb(var(--color-foreground));
   }
-  #section-{{ section.id }} .hero-banner__content--left { text-align: left; justify-self: start; }
+  #section-{{ section.id }} .hero-banner__content--left  { text-align: left; justify-self: start; }
   #section-{{ section.id }} .hero-banner__content--right { text-align: right; justify-self: end; }
-  #section-{{ section.id }} .hero-banner__heading { font-size: clamp(2rem, 5vw, 4rem); margin: 0 0 1rem; color: var(--text-color, #ffffff); }
-  #section-{{ section.id }} .hero-banner__subtext { font-size: 1.125rem; margin: 0 0 1.5rem; opacity: 0.9; color: var(--text-color, #ffffff); }
-  #section-{{ section.id }} .hero-banner__btn { display: inline-block; padding: 0.75rem 2rem; background: #fff; color: #000; text-decoration: none; border-radius: 4px; font-weight: 600; }
+  #section-{{ section.id }} .hero-banner__eyebrow {
+    font-size: 0.8125rem; letter-spacing: 0.15em; text-transform: uppercase;
+    opacity: 0.8; margin: 0 0 0.75rem;
+  }
+  #section-{{ section.id }} .hero-banner__heading {
+    font-family: var(--heading-font); font-weight: var(--heading-weight);
+    font-size: clamp(2rem, 5vw, var(--heading-size, 4rem));
+    line-height: 1.1; margin: 0 0 1rem;
+  }
+  #section-{{ section.id }} .hero-banner__subtext {
+    font-size: clamp(1rem, 2vw, 1.25rem); opacity: 0.9;
+    max-width: 600px; margin: 0 auto 1.75rem; line-height: 1.65;
+  }
+  #section-{{ section.id }} .hero-banner__content--left .hero-banner__subtext,
+  #section-{{ section.id }} .hero-banner__content--right .hero-banner__subtext { margin-left: 0; margin-right: 0; }
+  #section-{{ section.id }} .hero-banner__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
+  #section-{{ section.id }} .hero-banner__content--left .hero-banner__actions { justify-content: flex-start; }
+  #section-{{ section.id }} .hero-banner__content--right .hero-banner__actions { justify-content: flex-end; }
+  #section-{{ section.id }} .hero-banner__btn {
+    display: inline-flex; align-items: center; padding: 0.875rem 2.25rem;
+    border-radius: 4px; font-weight: 600; text-decoration: none; font-size: 0.9375rem;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  #section-{{ section.id }} .hero-banner__btn--primary {
+    background: rgb(var(--color-button)); color: rgb(var(--color-button-text));
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+  }
+  #section-{{ section.id }} .hero-banner__btn--secondary {
+    background: transparent; color: rgb(var(--color-foreground));
+    border: 2px solid rgba(var(--color-foreground), 0.7);
+  }
+  #section-{{ section.id }} .hero-banner__btn:hover {
+    transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25);
+  }
+  /* ── Stagger entrance animations ── */
+  #section-{{ section.id }} .hero-anim {
+    opacity: 0; transform: translateY(24px);
+    animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
+  }
+  #section-{{ section.id }} .hero-anim--1 { animation-delay: 0.1s; }
+  #section-{{ section.id }} .hero-anim--2 { animation-delay: 0.25s; }
+  #section-{{ section.id }} .hero-anim--3 { animation-delay: 0.4s; }
+  #section-{{ section.id }} .hero-anim--4 { animation-delay: 0.55s; }
+  @keyframes heroFadeUp {
+    to { opacity: 1; transform: translateY(0); }
+  }
+  /* ── Reduced motion: skip animations ── */
+  @media (prefers-reduced-motion: reduce) {
+    #section-{{ section.id }} .hero-anim { animation: none; opacity: 1; transform: none; }
+    #section-{{ section.id }} .hero-banner__parallax { position: absolute; inset: 0; }
+  }
+  /* ── Responsive ── */
   @media (max-width: 749px) {
     #section-{{ section.id }} .hero-banner__content { padding: 1.5rem; }
     #section-{{ section.id }} .hero-banner__content--left,
     #section-{{ section.id }} .hero-banner__content--right { text-align: center; justify-self: center; }
+    #section-{{ section.id }} .hero-banner__content--left .hero-banner__actions,
+    #section-{{ section.id }} .hero-banner__content--right .hero-banner__actions { justify-content: center; }
+  }
+  @media (min-width: 750px) and (max-width: 989px) {
+    #section-{{ section.id }} .hero-banner__content { max-width: 680px; }
   }
 </style>
 
+<script>
+/* Parallax — GPU-accelerated translateY, respects reduced-motion */
+(function() {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  var el = document.querySelector('#section-{{ section.id }} .hero-banner__parallax');
+  if (!el) return;
+  function onScroll() {
+    var rect = el.closest('section').getBoundingClientRect();
+    var progress = -rect.top / (window.innerHeight + rect.height);
+    el.style.transform = 'translateY(' + (progress * 80).toFixed(2) + 'px)';
+  }
+  window.addEventListener('scroll', onScroll, { passive: true });
+})();
+</script>
+
 {% schema %}
 {
   "name": "Hero Banner",
   "tag": "section",
   "class": "section-hero-banner",
   "settings": [
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color Scheme", "default": "scheme-1" },
     { "type": "image_picker", "id": "image", "label": "Background Image" },
+    { "type": "font_picker", "id": "heading_font", "label": "Heading Font", "default": "helvetica_n4" },
+    { "type": "range", "id": "heading_font_size", "label": "Heading Size (px)", "min": 28, "max": 96, "step": 4, "default": 64 },
+    { "type": "select", "id": "heading_tag", "label": "Heading Tag", "options": [
+      { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" },
+      { "value": "h3", "label": "H3" }, { "value": "h4", "label": "H4" }
+    ], "default": "h1" },
+    { "type": "text", "id": "eyebrow", "label": "Eyebrow Text" },
     { "type": "text", "id": "heading", "label": "Heading", "default": "Welcome to our store" },
-    { "type": "text", "id": "subtext", "label": "Subtext", "default": "Discover our collection" },
-    { "type": "text", "id": "button_label", "label": "Button Label", "default": "Shop Now" },
-    { "type": "url", "id": "button_link", "label": "Button Link" },
-    { "type": "range", "id": "overlay_opacity", "label": "Overlay Opacity", "min": 0, "max": 80, "step": 5, "default": 40 },
-    { "type": "range", "id": "min_height", "label": "Min Height (px)", "min": 300, "max": 900, "step": 50, "default": 500 },
-    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#ffffff" },
+    { "type": "textarea", "id": "subtext", "label": "Subtext", "default": "Discover our curated collection of premium products." },
+    { "type": "text", "id": "button_label", "label": "Primary Button Label", "default": "Shop Now" },
+    { "type": "url", "id": "button_link", "label": "Primary Button Link" },
+    { "type": "text", "id": "button_label_2", "label": "Secondary Button Label" },
+    { "type": "url", "id": "button_link_2", "label": "Secondary Button Link" },
+    { "type": "range", "id": "overlay_opacity", "label": "Overlay Opacity %", "min": 0, "max": 80, "step": 5, "default": 40 },
+    { "type": "checkbox", "id": "glass_overlay", "label": "Glassmorphism Overlay", "default": false },
+    { "type": "range", "id": "min_height", "label": "Min Height (px)", "min": 300, "max": 900, "step": 50, "default": 600 },
     { "type": "select", "id": "content_position", "label": "Content Position", "options": [
-      { "value": "left", "label": "Left" },
-      { "value": "center", "label": "Center" },
-      { "value": "right", "label": "Right" }
-    ], "default": "center" }
+      { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }
+    ], "default": "center" },
+    { "type": "range", "id": "padding_top", "label": "Padding Top (px)", "min": 0, "max": 160, "step": 8, "default": 80 },
+    { "type": "range", "id": "padding_bottom", "label": "Padding Bottom (px)", "min": 0, "max": 160, "step": 8, "default": 80 }
   ],
   "blocks": [{ "type": "@app" }],
   "presets": [{ "name": "Hero Banner" }]