/* ════════════════════════════════════════════════════════════════════
AWESTRUCK — Hero heading (Brutalist Cycler) · v1.0 LOCKED
Drop-in CSS. Scope: every rule is prefixed with .aw-hero so it
cannot collide with any other CSS in the project.
Pair with heading.html (or paste the same markup inline).
════════════════════════════════════════════════════════════════════ */
/* Required fonts — add this in if not already loaded:
*/
/* ─── HERO WRAPPER ─── */
.aw-hero{
position:relative;
padding:0px 0px;
padding-bottom: 10px;
font-family:'DM Sans',system-ui,sans-serif;
color:#0a0a0a;
}
.aw-hero.is-dark{ color:#fff; background:#000; }
[data-bs-theme="dark"] .aw-hero{ color:#fff; background:#000; }
/* ─── EYEBROW · "The world's" ─── */
.aw-hero .aw-eyebrow{
font-family:'Space Grotesk',sans-serif;
font-weight:700;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;
color:#1e3df1; /* blue on white */
margin:0 0 18px;
display:inline-flex;align-items:center;gap:10px;
}
.aw-hero.is-dark .aw-eyebrow{ color:#FFD153; } /* yellow on dark */
[data-bs-theme="dark"] .aw-hero .aw-eyebrow{ color:#FFD153; }
.aw-hero .aw-eyebrow .aw-line{ width:38px;height:1.5px;background:currentColor;opacity:0.6;display:inline-block; }
/* ─── HEADING ─── */
.aw-hero .aw-h{
font-family:'Bricolage Grotesque',sans-serif;
font-weight:900;
font-size: clamp(42px, 5.5vw, 88px);
line-height:1.05;
letter-spacing:-0.045em;
margin:0;
max-width:1200px;
color:inherit;
white-space: nowrap; /* ← keeps slot inline on desktop */
}
/* "first AI" — yellow highlight bar + 2 sparkles */
.aw-hero .aw-mark{
position:relative;display:inline-block;z-index:1;white-space:nowrap;
}
.aw-hero .aw-mark::before{
content:'';position:absolute;left:-4px;right:-4px;bottom:6%;height:18%;
background:#FFD153;z-index:-1;border-radius:3px;
transform-origin:left center;
animation: aw-underline 6s ease-in-out 0.6s infinite alternate;
}
@keyframes aw-underline{
0% { transform:scaleX(0); }
22% { transform:scaleX(1); }
100% { transform:scaleX(1); }
}
.aw-hero .aw-mark .aw-sparkle{
position:absolute;top:-0.4em;right:-0.55em;
width:0.42em;height:0.42em;color:#ff3b6e;
animation: aw-sparkle 2.4s ease-in-out infinite;
transform-origin:center;pointer-events:none;
}
.aw-hero.is-dark .aw-mark .aw-sparkle{ color:#FFD153; }
[data-bs-theme="dark"] .aw-hero .aw-mark .aw-sparkle{ color:#FFD153; }
.aw-hero .aw-mark .aw-sparkle2{
position:absolute;bottom:-0.18em;left:-0.5em;
width:0.3em;height:0.3em;color:#FFD153;
animation: aw-sparkle 2.6s ease-in-out 0.6s infinite;
transform-origin:center;pointer-events:none;
}
.aw-hero.is-dark .aw-mark .aw-sparkle2{ color:#06b6d4; }
[data-bs-theme="dark"] .aw-hero .aw-mark .aw-sparkle2{ color:#06b6d4; }
@keyframes aw-sparkle{
0%,100% { transform:scale(0.6) rotate(0); opacity:0.6; }
50% { transform:scale(1.2) rotate(75deg); opacity:1; }
}
/* ─── CYCLER · 19 rotating words (free time / weekend / Sunday / …) ─── */
.aw-hero .aw-slot{
position:relative;
display:inline-block;
overflow:hidden;
height:1.2em;
vertical-align:bottom;
line-height:1.2;
min-width:10ch;
}
.aw-hero .aw-list{
display:flex;flex-direction:column;line-height:1.2;
animation: aw-cycle 60s linear infinite;
}
.aw-hero .aw-list > span{
height:1.2em;display:flex;align-items:center;line-height:1.2;
font-family:'Fraunces',serif;font-style:italic;font-weight:600;letter-spacing:-0.025em;
background:linear-gradient(110deg,#1e3df1,#9333ea 40%,#ff3b6e);
background-size:220% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation: aw-flow 5s linear infinite;
white-space:nowrap;
}
.aw-hero.is-dark .aw-list > span{
background:linear-gradient(110deg,#06b6d4,#9333ea 35%,#ff3b6e);
background-size:220% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
[data-bs-theme="dark"] .aw-hero .aw-list > span{
background:linear-gradient(110deg,#06b6d4,#9333ea 35%,#ff3b6e);
background-size:220% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@keyframes aw-flow{ 0%,100%{background-position:0% 50%;} 50%{background-position:220% 50%;} }
@keyframes aw-cycle{
0.00%, 4.21% { transform: translateY(0); }
5.26%, 9.47% { transform: translateY(-1.2em); }
10.53%, 14.74% { transform: translateY(-2.4em); }
15.79%, 20.00% { transform: translateY(-3.6em); }
21.05%, 25.26% { transform: translateY(-4.8em); }
26.32%, 30.53% { transform: translateY(-6.0em); }
31.58%, 35.79% { transform: translateY(-7.2em); }
36.84%, 41.05% { transform: translateY(-8.4em); }
42.11%, 46.32% { transform: translateY(-9.6em); }
47.37%, 51.58% { transform: translateY(-10.8em); }
52.63%, 56.84% { transform: translateY(-12.0em); }
57.89%, 62.11% { transform: translateY(-13.2em); }
63.16%, 67.37% { transform: translateY(-14.4em); }
68.42%, 72.63% { transform: translateY(-15.6em); }
73.68%, 77.89% { transform: translateY(-16.8em); }
78.95%, 83.16% { transform: translateY(-18.0em); }
84.21%, 88.42% { transform: translateY(-19.2em); }
89.47%, 93.68% { transform: translateY(-20.4em); }
94.74%, 98.95% { transform: translateY(-21.6em); }
100% { transform: translateY(-22.8em); }
}
/* ─── SUBTITLE ─── "Pick one from below · Awestruck does the rest" ─── */
.aw-hero .aw-sub{
margin:22px 0 0;
font-family:'Bricolage Grotesque',sans-serif;
font-weight:800;font-size:clamp(22px, 2.1vw, 32px);
letter-spacing:-0.015em;
color:inherit;
display:flex;align-items:center;gap:18px;flex-wrap:wrap;line-height:1.2;
}
.aw-hero .aw-pin{
display:inline-flex;align-items:center;gap:8px;
font-family:'Space Grotesk',sans-serif;font-weight:800;
font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;
background:#0a0a0a;color:#FFD153;
padding:8px 14px 8px 12px;border-radius:7px;flex-shrink:0;position:relative;
animation: aw-pinbob 3.2s ease-in-out infinite;
}
.aw-hero.is-dark .aw-pin{ background:#FFD153; color:#0a0a0a; }
[data-bs-theme="dark"] .aw-hero .aw-pin{ background:#FFD153; color:#0a0a0a; }
.aw-hero .aw-pin::before{
content:'';width:7px;height:7px;border-radius:50%;background:#FFD153;
animation: aw-pulse 1.6s ease-in-out infinite;
}
.aw-hero.is-dark .aw-pin::before{ background:#0a0a0a; }
[data-bs-theme="dark"] .aw-hero .aw-pin::before{ background:#0a0a0a; }
.aw-hero .aw-pin .aw-arr-down{
width:13px;height:13px;margin-left:2px;
animation: aw-pinpoint 1.8s ease-in-out infinite;
}
@keyframes aw-pinbob { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-2px) rotate(1deg);} }
@keyframes aw-pinpoint { 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }
@keyframes aw-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.45;transform:scale(0.7);} }
/* "Awestruck" — subtle underline draws L→R then retracts R→L */
.aw-hero .aw-aw{ position:relative;display:inline-block;font-weight:900;letter-spacing:-0.02em; }
.aw-hero .aw-aw::after{
content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;
background:#0a0a0a;
transform-origin:left center;transform:scaleX(0);
animation: aw-draw 5.5s ease-in-out 1.2s infinite;
}
.aw-hero.is-dark .aw-aw::after{ background:#FFD153; }
[data-bs-theme="dark"] .aw-hero .aw-aw::after{ background:#FFD153; }
@keyframes aw-draw{
0% {transform:scaleX(0); transform-origin:left center;}
18% {transform:scaleX(1); transform-origin:left center;}
60% {transform:scaleX(1); transform-origin:left center;}
62% {transform:scaleX(1); transform-origin:right center;}
80% {transform:scaleX(0); transform-origin:right center;}
100% {transform:scaleX(0); transform-origin:right center;}
}
.aw-hero .aw-arrow{ display:inline-block; animation: aw-arr 2.6s ease-in-out infinite; }
@keyframes aw-arr{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);} }
/* ─── 3 CHIPS UNDER SUBTITLE ─── */
.aw-hero .aw-chips{
margin-top:34px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
color:inherit;opacity:0.85;
}
.aw-hero .aw-chip{
display:inline-flex;align-items:center;gap:7px;
padding:6px 12px;border-radius:99px;
background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);
}
.aw-hero.is-dark .aw-chip{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1); }
[data-bs-theme="dark"] .aw-hero .aw-chip{ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1); }
.aw-hero .aw-chip svg{ width:13px;height:13px;flex-shrink:0; }
/* ─── RESPONSIVE ─── tablet + mobile scale down ─── */
@media (max-width: 768px){
.aw-hero{ padding:36px 24px; }
.aw-hero .aw-h{ font-size:46px; line-height:1.05; letter-spacing:-0.04em; white-space: normal; } /* ← allow wrap */
.aw-hero .aw-sub{ font-size:17px; gap:12px; margin-top:18px; }
.aw-hero .aw-pin{ font-size:10.5px; letter-spacing:0.1em; padding:6px 10px 6px 9px; }
.aw-hero .aw-chips{ gap:8px; margin-top:20px; font-size:11px; }
}
@media (max-width: 480px){
.aw-hero{
padding: 0px 18px;
padding-bottom: 20px; }
.aw-hero .aw-eyebrow{ font-size:10.5px; margin-bottom:12px; }
.aw-hero .aw-h{ font-size:32px; letter-spacing:-0.035em; line-height:1.08; }
.aw-hero .aw-sub{ font-size:14.5px; gap:10px; margin-top:14px; }
.aw-hero .aw-pin{ font-size:9.5px; letter-spacing:0.08em; padding:5px 8px; }
.aw-hero .aw-chips{ font-size:10.5px; gap:7px; margin-top:16px; }
}
@media (prefers-reduced-motion: reduce){
.aw-hero *, .aw-hero *::before, .aw-hero *::after{
animation-duration: 0.01ms !important;
}
}
@media (max-width: 768px){
.aw-hero .aw-chips{
display: none;
}
}
@media (min-width: 1000px){
.aw-hero{
margin-left: 15px !important;
}
}