/* css/euler.css */

:root {
  --euler-black: #000000;
  --euler-red: #FF3B30;
}

/* Desktop Euler в gallery */
.euler-layer.desktop-only {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.euler-layer.desktop-only svg {
  width: min(140vw, 140vh);
  height: auto;
  max-width: 2800px;
  opacity: 0.18;
}

/* Mobile: eler-sticky */
.eler-sticky { display: none; }

@media (max-width: 768px) {
  .euler-layer.desktop-only { display: none !important; }
  
  .eler-sticky {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 30vh;
    padding: 3vh 0;
    z-index: 10;
    background: #FFFFFF;
  }
  
  .eler-sticky .euler-layer {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  
  .eler-sticky #eulerScene {
    width: 90vw;
    height: auto;
    max-height: 30vh;
    opacity: 0.85;
  }
}

/* Touch Portrait: eler-sticky для мобильной версии */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .eler-layer { display: none !important; }
  
  .eler-sticky {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 25vh;
    padding: 2vh 0;
    z-index: 10;
    background: #FFFFFF;
  }
  
  .eler-sticky .euler-layer {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    box-sizing: border-box;
  }
  
  .eler-sticky #eulerScene {
    width: min(80vw, 25vh);
    height: auto;
    max-height: 25vh;
    opacity: 0.85;
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
  }
  
  #final-text,
  #final-text tspan {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  }
}

/* Touch Landscape = DESKTOP: показываем eler-layer, скрываем eler-sticky */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .eler-sticky {
    display: none !important;
  }
  
  .eler-layer {
    display: block !important;
  }
}

/* SVG Elements */
#eulerScene line, #angle-arc {
  stroke: var(--euler-black);
  stroke-width: 27;
  fill: none;
  stroke-linecap: round;
}

#unit-circle {
  stroke: var(--euler-red);
  stroke-width: 180;
  fill: none;
}

.dash { stroke-dasharray: 66 66; }

#eulerScene text {
  font-family: Inter, sans-serif;
  fill: var(--euler-black);
  font-weight: 800;
}

#re, #im, #cos, #sin { font-size: 180px; }
#angle-x { font-size: 180px; opacity: 0; }
#f1 { font-size: 258px; opacity: 0; }
#f2 { font-size: 300px; opacity: 0; }
.i-red, .re-red, .im-red { fill: var(--euler-red); }
#point-e { fill: var(--euler-red); opacity: 0; }
#label-e { font-size: 200px; opacity: 0; }

#final-text {
  font-family: Oswald, sans-serif;
  font-size: 340px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  text-anchor: middle;
  dominant-baseline: central;
  fill: rgba(0,0,0,0.85);
}

#final-text tspan,
#d-final-text tspan {
  text-anchor: middle;
}

#d-final-text {
  font-family: Oswald, sans-serif;
  font-size: 340px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  text-anchor: middle;
  dominant-baseline: central;
  fill: rgba(0,0,0,0.85);
}

@media (max-width: 768px) {
  #unit-circle { stroke-width: 130; }
  #eulerScene line, #angle-arc { stroke-width: 20; }
  #re, #im, #cos, #sin, #angle-x { font-size: 160px; }
  #f1 { font-size: 210px; }
  #f2 { font-size: 250px; }
  #final-text { font-size: 360px; }
}

/* Desktop SVG */
#eulerSceneDesktop line, #d-angle-arc {
  stroke: var(--euler-black);
  stroke-width: 27;
  fill: none;
  stroke-linecap: round;
}

#d-unit-circle {
  stroke: var(--euler-red);
  stroke-width: 90;
  fill: none;
}

#eulerSceneDesktop .dash { stroke-dasharray: 66 66; }

#eulerSceneDesktop text {
  font-family: Inter, sans-serif;
  fill: var(--euler-black);
  font-weight: 800;
}

#d-re, #d-im, #d-cos, #d-sin { font-size: 180px; }
#d-angle-x { font-size: 180px; opacity: 0; }
#d-f1 { font-size: 258px; opacity: 0; }
#d-f2 { font-size: 300px; opacity: 0; }
#d-point-e { fill: var(--euler-red); opacity: 0; }
#d-label-e { font-size: 200px; opacity: 0; }

/* d-final-text стили уже объявлены выше */