/* =========================================================
   B2B & B2C — Page CSS
   - Global gutters applied to <main> so NOTHING touches edges
   - Keeps your working 3D rotating text
   - No horizontal overflow
   ========================================================= */

/* ---------- Tunables ---------- */
:root{
  /* 3D layer spacing (smaller on mobile for “glued” look) */
  --rot-z-step: 1px;

  /* Elegant page gutters with safe-area support */
  --page-gutter-left:  max(20px, calc(4vw + env(safe-area-inset-left)));
  --page-gutter-right: max(20px, calc(4vw + env(safe-area-inset-right)));
}

/* Safety net: prevent accidental horizontal overflow */
html, body { overflow-x: hidden; }

/* =========================================================
   Global page gutters: apply to the whole main content
   ========================================================= */
#main{
  padding-inline-start: var(--page-gutter-left);
  padding-inline-end:   var(--page-gutter-right);
  /* Optional vertical breathing room (adjust to taste) */
  /* padding-block: 0; */
}

/* If any descendant tries 100vw, keep it within the gutters gracefully */
#main * {
  box-sizing: border-box;
  max-width: 100%;
}

/* =========================================================
   Rotating Text — your “good” version (behavior unchanged)
   (inherits gutters from #main now)
   ========================================================= */
.rotating-container {
  position: relative;
  width: 100%;
  margin-top: 7%;
  margin-bottom: 12%;
  min-height: 40vh;
  justify-content: center;
  align-items: center;
  perspective: 2000px; /* Increased perspective for reduced distortion */
  text-align: center;

  /* Let the 3D word extend outside its own box (but still within #main gutters) */
  overflow: visible;

  /* Bottom guard so descenders aren’t cut on some fonts/devices */
  padding-bottom: 0.38em;
}

.rotating-text {
  font-size: 14vw;
  font-weight: bold;
  color: #000; /* High-tech: black */
  position: relative;  
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;             /* Prevents backside flicker */
  -webkit-backface-visibility: hidden;     /* Safari-specific fix */
  animation: spin 5.5s linear infinite;
  transform-origin: center;                /* Ensures rotation around its own axis */
  transform: translateZ(0.1px);            /* Slight Z-axis offset to avoid z-fighting */
  white-space: nowrap;                     /* keep “B2B & B2C” on a single line */
  will-change: transform;
}

.slower-rotating { animation: spin 7s linear infinite; }

/* Tablet */
@media (max-width: 1024px) {
  .rotating-container { min-height: 15vh; }
  .rotating-text { font-size: 12vw; }
}

/* Small tablets / big phones */
@media (max-width: 768px) {
  .rotating-container { min-height: 14vh; }
  .rotating-text { font-size: 12.5vw; }
}

/* Phones */
@media (max-width: 480px) {
  .rotating-container {
    min-height: 8vh;
    margin-bottom: 20%;
    padding-bottom: 0.42em; /* a hair more guard on tiny devices */
  }
  .rotating-text { font-size: 14vw; } /* unchanged: no shrinking on mobile */
}

/* Create Beveled Layers */
.rotating-text span {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  justify-content: center;
  align-items: center;
  transform-origin: center center; /* Rotate around its own center */
}

/* High-tech palette */
body.high-tech-layout .rotating-text span:nth-child(1) { transform: translateZ(calc(-4 * var(--rot-z-step))); color: #b5b5b5; }
body.high-tech-layout .rotating-text span:nth-child(2) { transform: translateZ(calc(-3 * var(--rot-z-step))); color: #222222; }
body.high-tech-layout .rotating-text span:nth-child(3) { transform: translateZ(calc(-2 * var(--rot-z-step))); color: #444444; }
body.high-tech-layout .rotating-text span:nth-child(4) { transform: translateZ(calc(-1 * var(--rot-z-step))); color: #666666; }
body.high-tech-layout .rotating-text span:nth-child(5) { transform: translateZ(0px);                         color: #000000; }
body.high-tech-layout .rotating-text span:nth-child(6) { transform: translateZ(calc( 1 * var(--rot-z-step))); color: #666666; }
body.high-tech-layout .rotating-text span:nth-child(7) { transform: translateZ(calc( 2 * var(--rot-z-step))); color: #444444; }
body.high-tech-layout .rotating-text span:nth-child(8) { transform: translateZ(calc( 3 * var(--rot-z-step))); color: #222222; }
body.high-tech-layout .rotating-text span:nth-child(9) { transform: translateZ(calc( 4 * var(--rot-z-step))); color: #b5b5b5; }

/* Creative palette */
body.creative-layout .rotating-text span:nth-child(1) { transform: translateZ(calc(-4 * var(--rot-z-step))); color: #DEA5A4; }
body.creative-layout .rotating-text span:nth-child(2) { transform: translateZ(calc(-3 * var(--rot-z-step))); color: #1A1A1A; }
body.creative-layout .rotating-text span:nth-child(3) { transform: translateZ(calc(-2 * var(--rot-z-step))); color: #1A1A1A; }
body.creative-layout .rotating-text span:nth-child(4) { transform: translateZ(calc(-1 * var(--rot-z-step))); color: #1A1A1A; }
body.creative-layout .rotating-text span:nth-child(5) { transform: translateZ(0px);                         color: #1A1A1A; }
body.creative-layout .rotating-text span:nth-child(6) { transform: translateZ(calc( 1 * var(--rot-z-step))); color: #1A1A1A; }
body.creative-layout .rotating-text span:nth-child(7) { transform: translateZ(calc( 2 * var(--rot-z-step))); color: #1A1A1A; }
body.creative-layout .rotating-text span:nth-child(8) { transform: translateZ(calc( 3 * var(--rot-z-step))); color: #1A1A1A; }
body.creative-layout .rotating-text span:nth-child(9) { transform: translateZ(calc( 4 * var(--rot-z-step))); color: #DEA5A4; }

/* Tighter, “glued” layers on mobile (no size shrink) */
@media (max-width: 768px){
  :root{ --rot-z-step: 0.65px; } /* bring slices closer together */
  /* reduce contrast slightly so the stack reads as one face */
  body.high-tech-layout .rotating-text span:nth-child(1),
  body.high-tech-layout .rotating-text span:nth-child(9){ color:#9e9e9e; }
  body.high-tech-layout .rotating-text span:nth-child(2),
  body.high-tech-layout .rotating-text span:nth-child(8){ color:#2a2a2a; }
  body.high-tech-layout .rotating-text span:nth-child(3),
  body.high-tech-layout .rotating-text span:nth-child(7){ color:#3c3c3c; }
  body.high-tech-layout .rotating-text span:nth-child(4),
  body.high-tech-layout .rotating-text span:nth-child(6){ color:#555; }
}
@media (max-width: 480px){
  :root{ --rot-z-step: 0.55px; } /* even tighter on small phones */
}

/* Smooth Rotation Animation */
@keyframes spin {
  0%   { transform: rotateY(0deg)   rotateX(0.1deg) translateZ(0.1px); }
  100% { transform: rotateY(360deg) rotateX(0.1deg) translateZ(0.1px); }
}

/* =========================================================
   Semantic copy (regular) — Headings & Paragraphs
   All inherit the #main gutters; no edge touching.
   ========================================================= */

/* Let your global styles.css control type sizes; keep only spacing/colors */
.text-section{
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Headings — theme color only (remove if your globals handle this) */
.text-section h2{
  margin: 0 0 0.75em;
  font-weight: 700;
  color: #03c03c;
}
body.high-tech-layout .text-section h2{ color:#08FF08; }
body.creative-layout  .text-section h2{ color:#ff9966; }

.text-section h3{
  margin: 1.25em 0 0.5em;
  font-weight: 700;
}

/* Paragraphs — regular flow; gutters come from #main */
.text-section p{
  margin: 0 0 1em;
  padding: 0;           /* gutters are already applied on #main */
  width: auto;
  max-width: none;
}

/* Optional: CSS-only reveal (remove if you prefer static) */
@supports (animation-timeline: view()){
  .text-section h2,
  .text-section h3,
  .text-section p{
    opacity: 0;
    transform: translateY(16px);
    animation: ts-fade 1ms ease-out both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .text-section > *:nth-child(1) { animation-range: entry 0%  cover 22%; }
  .text-section > *:nth-child(2) { animation-range: entry 5%  cover 24%; }
  .text-section > *:nth-child(3) { animation-range: entry 10% cover 26%; }
  .text-section > *:nth-child(4) { animation-range: entry 15% cover 28%; }
  .text-section > *:nth-child(5) { animation-range: entry 20% cover 30%; }
  .text-section > *:nth-child(6) { animation-range: entry 25% cover 30%; }
  .text-section > *:nth-child(7) { animation-range: entry 30% cover 30%; }

  @keyframes ts-fade{
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce){
  .text-section h2,
  .text-section h3,
  .text-section p{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}