/* =========================================
   FRITTS — Home Page Styles (index.html)
   Loaded after design.css + main.css.
   ========================================= */

/* =========================================
   Hero — scroll runway + pinned wrapper
   ========================================= */
.hero-container {
    position: relative;
    height: 700vh;
    height: 700svh;
}

.animation-wrapper {
    position: relative;
    width: var(--frame-w);
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--color-brand-dark-teal);
}

/* =========================================
   Pulse App Runway — pinned wrapper for Phase 7–9
   ========================================= */
.pulse-runway {
    position: relative;
    height: 1000vh;
    height: 1000svh;
}

.pulse-wrapper {
    position: relative;
    width: var(--frame-w);
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--color-brand-dark-teal);
}

/* Hero-style static background inside the pulse-wrapper — matches the
   orange circle and building from the hero, minus the pulse spots and text. */
.pulse-bg-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--frame-w, 100svw) * 0.85);
    height: calc(var(--frame-w, 100svw) * 0.85);
    border-radius: 50%;
    background-color: var(--color-brand-red);
    z-index: 0;
    pointer-events: none;
}

.pulse-bg-building {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    pointer-events: none;
}

.pulse-bg-building img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   Phase 1 — Expanding red circle
   ========================================= */
.orange-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.375em;
    height: 7.375em;
    border-radius: 50%;
    background-color: var(--color-brand-red);
    will-change: width, height;
}

/* =========================================
   Phase 2–4 — Headline + scroll icon
   ========================================= */
.home-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.home-headline {
    color: var(--color-brand-white);
    font-size: 3.125em;
    font-weight: var(--font-weight-bold);
    text-align: center;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(3em);
}

.scroll-down-icon {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: scroll-icon-bounce var(--scroll-icon-bounce-duration) ease-in-out infinite;
}

@keyframes scroll-icon-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-0.75em); }
}

/* =========================================
   Phase 5 — Building image rises from bottom
   ========================================= */
.building-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    transform: translateY(100%);
}

.building-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   Phase 5 — H2 text slides in from left
   ========================================= */
.hero-text-2 {
    position: absolute;
    bottom: 43svh;
    left: 15%;
    transform: translateY(-50%);
    z-index: 15;
    pointer-events: auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 3em;
    overflow: hidden;
}

.hero-subtitle {
    color: var(--color-brand-white);
    font-size: 2.25em;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    max-width: 19em;
    margin-bottom: 0.8em;
}

/* =========================================
   Glass pill button
   ========================================= */
.btn-glass {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    background: var(--btn-glass-bg);
    color: var(--color-brand-white);
    text-decoration: none;
    padding: var(--btn-glass-padding-block) var(--btn-glass-padding-inline);
    border-radius: var(--btn-glass-radius);
    font-size: var(--btn-glass-font-size);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    backdrop-filter: blur(var(--btn-glass-blur));
    border: 1px solid var(--btn-glass-border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-glass:hover {
    background: var(--btn-glass-bg-hover);
}

/* Pulse App CTA — frameless variant (no white border ring) */
#pulse-app-btn {
    border: none;
}

/* Arrow variant — compact right padding for icon circle */
.btn-glass--arrow {
    padding: 0.25em 0.25em 0.25em var(--btn-glass-padding-inline);
}

.btn-glass .arrow-circle {
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-glass .arrow-circle img {
    width: 100%;
    height: 100%;
}

/* Download variant — red background */
.btn-glass--download {
    background: var(--color-brand-red);
    border-color: var(--color-brand-red);
}

.btn-glass--download:hover {
    background: var(--color-brand-red);
    opacity: 0.9;
}

/* =========================================
   Phase 6 — Pulsing hotspots on building
   ========================================= */
.pulse-spot {
    position: absolute;
    width: 10%;
    z-index: 6;
    cursor: pointer;
}

.pulse-spot-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    transform-origin: 50% 50%;
    transition: transform 0.3s ease-out;
}

/* Each pulse-spot contains three concentric SVG circles that throb scale + opacity
   independently — base values match mock-pulse.html defaults (outer r=70 / 0.8→0.5
   / 1→1.08, mid r=55.365 / 0.5→0.3 / 1→1.12, inner r=39.164 / 0.3→0.15 / 1→1.18).
   Stagger 0.3s between rings within a spot. An additional per-spot offset keeps
   the three spots out of sync. Gated by .is-idle added by GSAP after Phase 6 — see home.js. */
.pulse-ring {
    transform-origin: 71.5px 71.5px;
    transform-box: view-box;
}

.pulse-spot.is-idle .pulse-ring--outer {
    animation: pulse-ring-outer var(--pulse-ring-duration) var(--pulse-ring-ease) infinite;
    animation-delay: calc(var(--pulse-spot-phase, 0s) + 0s);
}

.pulse-spot.is-idle .pulse-ring--mid {
    animation: pulse-ring-mid var(--pulse-ring-duration) var(--pulse-ring-ease) infinite;
    animation-delay: calc(var(--pulse-spot-phase, 0s) + var(--pulse-ring-stagger));
}

.pulse-spot.is-idle .pulse-ring--inner {
    animation: pulse-ring-inner var(--pulse-ring-duration) var(--pulse-ring-ease) infinite;
    animation-delay: calc(var(--pulse-spot-phase, 0s) + (var(--pulse-ring-stagger) * 2));
}

/* Hover: a little bigger, a little faster. Only animation-duration changes so the
   running pulse continues smoothly (swapping animation-name restarts from 0%
   and causes a visible freeze). "A little bigger" is applied to the <svg>
   container as a separate CSS transform — it doesn't fight the <circle>
   transforms in the keyframes, and fades in via a transition. */
.pulse-spot:hover .pulse-spot-svg {
    transform: scale(1.06);
}

.pulse-spot:hover .pulse-ring--outer,
.pulse-spot:hover .pulse-ring--mid,
.pulse-spot:hover .pulse-ring--inner {
    animation-duration: var(--pulse-ring-duration-hover);
}

@keyframes pulse-ring-outer {
    0%, 100% { transform: scale(1);    opacity: 0.8; }
    50%      { transform: scale(1.08); opacity: 0.5; }
}

@keyframes pulse-ring-mid {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%      { transform: scale(1.12); opacity: 0.3; }
}

@keyframes pulse-ring-inner {
    0%, 100% { transform: scale(1);    opacity: 0.3; }
    50%      { transform: scale(1.18); opacity: 0.15; }
}


.spot-ev {
    top: 70%;
    left: 8.5%;
    width: 15%;
    --pulse-spot-phase: 0s;
}

.spot-solar {
    top: 34%;
    left: 73%;
    width: 12%;
    --pulse-spot-phase: 0.4s;
}

.spot-heat-pump {
    top: 74%;
    left: 83%;
    width: 21%;
    --pulse-spot-phase: 0.8s;
}

/* =========================================
   Phase 7 — Green circle transition
   ========================================= */
.green-circle {
    --gc-w: 0;
    --gc-h: 0;
    position: absolute;
    width: calc(var(--gc-w) * min(100vw, 200vh));
    height: calc(var(--gc-h) * min(100vw, 200vh));
    border-radius: 50%;
    background-color: #3D666A;
    z-index: 20;
    left: 25%;
    top: 48%;
    transform: translate(-50%, -50%);
    will-change: width, height;
    pointer-events: none;
}

/* =========================================
   Phase 7 — Pulse App guy + text
   ========================================= */
.pulse-app-guy {
    position: absolute;
    left: -145%;
    bottom: 0;
    z-index: 25;
}

.pulse-app-guy img {
    width: auto;
    max-width: calc(0.55 * var(--frame-w));
    display: block;
}

.pulse-app-text {
    position: absolute;
    left: 48%;
    top: 28%;
    z-index: 25;
    pointer-events: auto;
}

.pulse-app-h2 {
    color: var(--color-brand-white);
    font-family: var(--font-family-primary);
    font-size: 2.5em;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    transform: translateX(100vw);
}

.pulse-app-h2-sub {
    color: var(--color-brand-white);
    font-family: var(--font-family-primary);
    font-size: 2.5em;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    margin-top: 0.6em;
    margin-bottom: 1.2em;
    transform: translateX(100vw);
}

.pulse-app-buttons {
    display: flex;
    gap: 1em;
    align-items: center;
    transform: translateX(100vw);
}

/* =========================================
   Phase 9 — Pulse App Page overlay
   ========================================= */
.pulse-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none;
}

.pulse-page-bg {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(0.95 * var(--frame-w));
    height: calc(0.95 * var(--frame-w));
    border-radius: 50%;
}

.pulse-page-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pulse-page-ring-1 {
    width: 100%;
    height: 100%;
    animation: page-ring-outer 4s var(--pulse-ring-ease) infinite;
    animation-delay: 0s;
}

.pulse-page-ring-2 {
    width: 82%;
    height: 82%;
    animation: page-ring-mid 4s var(--pulse-ring-ease) infinite;
    animation-delay: 0.5s;
}

.pulse-page-ring-3 {
    width: 64%;
    height: 64%;
    animation: page-ring-inner 4s var(--pulse-ring-ease) infinite;
    animation-delay: 1s;
}

@keyframes page-ring-outer {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
    50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 0.6; }
}

@keyframes page-ring-mid {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scale(1.10); opacity: 0.5; }
}

@keyframes page-ring-inner {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
    50%      { transform: translate(-50%, -50%) scale(1.14); opacity: 0.35; }
}

.pulse-page-title {
    position: absolute;
    top: 15%;
    left: 50%;
    color: var(--color-brand-white);
    font-family: var(--font-family-primary);
    font-size: 3em;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.pulse-page-subtitle {
    position: absolute;
    top: 28%;
    left: 50%;
    width: 50em;
    color: var(--color-brand-white);
    font-family: var(--font-family-primary);
    font-size: 0.9em;
    font-weight: var(--font-weight-regular);
    text-align: center;
    line-height: 1.6;
    opacity: 0.85;
}

.pulse-page-phone {
    position: absolute;
    bottom: -2em;
    left: 50%;
}

.pulse-page-phone img {
    height: 62vh;
    width: auto;
    max-width: calc(0.45 * var(--frame-w));
    display: block;
}

/* =========================================
   Pulse Detail — White overlay section
   ========================================= */
.pulse-detail {
    position: relative;
    z-index: 2;
    background-color: var(--color-brand-white);
    margin-top: -100vh;
    margin-top: -100svh;
    width: var(--frame-w);
}

.pulse-detail-inner {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh;
}

/* Fixed phone hand — frame bottom-left, independent of layout */
.pulse-detail-phone-fixed {
    position: fixed;
    bottom: 0;
    left: var(--frame-offset, 0);
    z-index: 3;
    pointer-events: none;
}

.pulse-detail-phone-fixed img {
    height: 85vh;
    width: auto;
    display: block;
}

/* Right content column — margin-left reserves the left half for the fixed phone */
.pulse-detail-content-col {
    width: 50%;
    margin-left: 50%;
    padding: 5em 3em 5em 2em;
}

/* Each content block */
.pulse-detail-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pulse-detail-block:last-child {
    border-bottom: none;
}

/* Block 1: top row — text + small phone */
.pulse-detail-block-top {
    display: flex;
    align-items: flex-start;
    gap: 2em;
    margin-bottom: 2em;
}

.pulse-detail-block-text {
    flex: 1;
}

.pulse-detail-heading {
    font-family: var(--font-family-primary);
    font-size: 1.75em;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-navy);
    margin-bottom: 0.75em;
    line-height: 1.2;
}

.pulse-detail-body {
    font-family: var(--font-family-primary);
    font-size: 0.85em;
    font-weight: var(--font-weight-regular);
    color: var(--color-brand-navy);
    line-height: 1.6;
    opacity: 0.8;
}

/* Small phone at top-right of Block 1 */
.pulse-detail-phone-right {
    width: 12em;
    height: auto;
    flex-shrink: 0;
}

/* Teal bar at bottom of Block 1 */
.pulse-detail-teal-bar {
    background-color: var(--color-brand-dark-teal);
    border-radius: 30px;
    padding: 1.5em 2em;
    margin-top: auto;
}

.pulse-detail-teal-bar p {
    font-family: var(--font-family-primary);
    font-size: 0.8em;
    font-weight: var(--font-weight-regular);
    color: var(--color-brand-white);
    line-height: 1.6;
}

/* Block 2 & 3: side-by-side split layout */
.pulse-detail-block-split {
    display: flex;
    align-items: center;
    gap: 2em;
}

.pulse-detail-block-split.first {
    background-color: var(--color-brand-dark-teal);
    height: 18.75em;
    border-radius: 2em;
    padding: 1em 2em;
}

.pulse-detail-block-split.second {
    background-color: var(--color-brand-red);
    height: 18.75em;
    border-radius: 2em;
    padding: 1em 2em;
    text-align: right;
}

.pulse-detail-phone-left {
    width: 14em;
    height: auto;
    flex-shrink: 0;
}

.pulse-detail-block-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* Card section headings (Dein Smart Home / Kann noch Smarter!) */
.pulse-detail-badge {
    font-family: var(--font-family-primary);
    font-size: 2em;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-white);
    line-height: 1.2;
}

/* Body text inside colored cards → white */
.pulse-detail-block-split .pulse-detail-body {
    color: var(--color-brand-white);
    opacity: 1;
}

/* Small phone inside Block 2 right column */
.pulse-detail-phone-small {
    width: 10em;
    height: auto;
    align-self: flex-end;
}

/* Teal card in Block 3 */
.pulse-detail-teal-card {
    background-color: var(--color-brand-dark-teal);
    border-radius: 30px;
    padding: 1.5em 2em;
}

.pulse-detail-teal-card p {
    font-family: var(--font-family-primary);
    font-size: 0.8em;
    font-weight: var(--font-weight-regular);
    color: var(--color-brand-white);
    line-height: 1.6;
}

/* =========================================
   White Interlude — normal-scroll section between Hero and Pulse-App runway
   ========================================= */
.white-interlude {
    position: relative;
    width: var(--frame-w);
    background-color: var(--color-brand-white);
    color: var(--color-brand-navy);
    font-family: var(--font-family-primary);
    padding: 6em 0;
    display: flex;
    flex-direction: column;
    gap: 6em;
}

/* Sub-section 1: Brand carousel (infinite marquee) */
.wi-brands {
    width: 100%;
    overflow: hidden;
    padding: 2em 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wi-brands-track {
    display: flex;
    gap: 4em;
    width: max-content;
    animation: wi-brand-marquee 30s linear infinite;
}

.wi-brand-item {
    flex: 0 0 auto;
    font-family: var(--font-family-primary);
    font-size: 1.75em;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-navy);
    opacity: 0.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5em 1em;
}

@keyframes wi-brand-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Sub-section 2: What FRITTS does */
.wi-company {
    padding: 2em 6em;
    text-align: center;
    max-width: 50em;
    margin: 0 auto;
}

.wi-company-heading {
    font-family: var(--font-family-primary);
    font-size: 2.75em;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-navy);
    line-height: 1.2;
    margin-bottom: 0.6em;
}

.wi-company-body {
    font-family: var(--font-family-primary);
    font-size: 1.05em;
    font-weight: var(--font-weight-regular);
    color: var(--color-brand-navy);
    line-height: 1.7;
    opacity: 0.8;
}

/* Sub-section 3: Testimonials */
.wi-testimonials {
    padding: 2em 6em;
}

.wi-testimonials-heading {
    font-family: var(--font-family-primary);
    font-size: 2.25em;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-navy);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 1.5em;
}

.wi-testimonials-row {
    display: flex;
    gap: 2em;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

.wi-testimonial-card {
    flex: 1 1 18em;
    max-width: 22em;
    background-color: #F5F6F8;
    border-radius: 1.5em;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.wi-testimonial-quote {
    font-family: var(--font-family-primary);
    font-size: 1em;
    font-weight: var(--font-weight-regular);
    color: var(--color-brand-navy);
    line-height: 1.6;
    opacity: 0.85;
}

.wi-testimonial-name {
    font-family: var(--font-family-primary);
    font-size: 0.95em;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-dark-teal);
    margin-top: auto;
}

/* Sub-section 4: CTA split — text + button (left), image (right) */
.wi-cta {
    display: flex;
    align-items: center;
    gap: 4em;
    padding: 2em 6em;
}

.wi-cta-left {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
}

.wi-cta-heading {
    font-family: var(--font-family-primary);
    font-size: 2.5em;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-navy);
    line-height: 1.2;
}

.wi-cta-body {
    font-family: var(--font-family-primary);
    font-size: 1em;
    font-weight: var(--font-weight-regular);
    color: var(--color-brand-navy);
    line-height: 1.6;
    opacity: 0.8;
    max-width: 26em;
    margin-bottom: 0.5em;
}

/* CTA button: override .btn-glass for white background context */
.wi-cta #pulse-app-btn {
    background: var(--color-brand-dark-teal);
    color: var(--color-brand-white);
    border: none;
}

.wi-cta #pulse-app-btn:hover {
    background: var(--color-brand-cyan);
}

.wi-cta-left {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
}